Perform actions within the with helper

Question

New to Ember here. I am trying to figure out how to execute an action and the product of that action be used by the #with helper. Below is an example of my code:

{{#navigation-container as |navigationContainer|}} {{#with (action navigationContainer.previousPage model) as |prev|}} {{link-to (t 'navigation.previous') (concat 'course-run.' prev.modelName) prev activeClass="o25" title=prev.title}} {{/with}} {{/navigation-container}}

navigation-container is a component that exposes a few actions, one of which is previousPage. previousPage simply returns a model that I then use to create some links and use with ember-keyboard.

I'm receiving an error that the link-to can't build a route due to prev being undefined. The action is executing and returning correctly just above this with block, so I'm assuming the with block is the problem.

Thanks for any help!

it is ok to create an action with the following {{#with (action navigationContainer.previousPage model) as |prev|}} code snippet; but what does prev.modelName means? prev itself is a function and it contains no property called modelName. the action does not run by itself in the template with this declaration; you need to pass it to a component and execute it within a js file. What you are trying to achieve is confusing if not impossible if what I understood is correct. Could you tell what you are trying to achieve? Are you trying to execute the action within the template or sth. else? — feanor07

Lux Lux · Accepted Answer · 2017-07-09T14:18:25

I think you understood this wrong. The with helper does not allow you to you execute an action. The result of (action navigationContainer.previousPage model) is basically a new closure function that will execute navigationContainer.previousPage with the first parameter model and the next parameters are the parameters you give to your new function.

So if you do something like <button onclick={{action prv "bar"}}></button> this will result in the function navigationContainer.previousPage to be executed with the first parameter model and the next "bar".

If you want the result of a function in your template you have to use a computed property.

Perform actions within the with helper

1 Answers