Ember bound action has issues with iterated context and late binding

[kingpin2k]

If you bind during an each, the property is assumed to be in the current context, as opposed to the possible iterated context.

{{#each item in controller}}
  <button {{action item.myAction}}>click me </button>
{{/each}}

Not Working: http://emberjs.jsbin.com/saturubu/3/edit & http://emberjs.jsbin.com/saturubu/4/edit

You can work around it by using an item controller (giving a real context to the section). Unfortunately you must force the context (meaning you can't say item in controller, or it will search for controller.item.myAction.

{{#each controller}}  
  <button {{action myAction}}>click me </button>
{{/each}}

Working: http://emberjs.jsbin.com/saturubu/1/edit

[kingpin2k]

Additionally, I'm not sure if it's appropriate to switch this assert to false now, https://github.com/emberjs/ember.js/blob/master/packages_es6/ember-routing/lib/helpers/action.js#L97

[hyderali]

@kingpin2k #4658 addresses this.

[rwjblue]

Closing in favor of #4658.

[kingpin2k]

I'm thinking we can do something like this:

 if (options.boundProperty) {
        actionName = resolveParams(options.parameters.context, [actionNameOrPath], { types: ['ID'], data: options.parameters.options.data });

        if(typeof actionName === 'undefined' || typeof actionName === 'function') {
          Ember.assert("You specified a quoteless path to the {{action}} helper '" + actionNameOrPath + "' which did not resolve to an actionName. Perhaps you meant to use a quoted actionName? (e.g. {{action '" + actionNameOrPath + "'}}).", true);
          actionName = actionNameOrPath;
        }
      }

instead of

 if (options.boundProperty) {
        actionName = handlebarsGet(target, actionNameOrPath, options.options);

        if(typeof actionName === 'undefined' || typeof actionName === 'function') {
          Ember.assert("You specified a quoteless path to the {{action}} helper '" + actionNameOrPath + "' which did not resolve to an actionName. Perhaps you meant to use a quoted actionName? (e.g. {{action '" + actionNameOrPath + "'}}).", true);
          actionName = actionNameOrPath;
        }
      }

I'll need to check out some additional use cases, I've checked out with other params, without params, not bound and it seems to be fine so far, but I'll keep investigating

[rwjblue]

@kingpin2k #4658 changed this from target to the current context (it is merged into master and beta branch now).

[kingpin2k]

@rjackson that only works if the property exists in the current context, aka it would still break if you used

{{#each item in controlller}}
   <button {{action item.myAction}}>click</button>
{{/each}}

it would then do a get for item.myAction on the context.

[rwjblue]

@kingpin2k - Great point. Thanks for the PR.

[NvnTiwari]

Hi, i am getting this issue:
" You specified a quoteless path to the {{action}} helper which did not resolve to an action name (a string). Perhaps you meant to use a quoted actionName? (e.g. {{action 'save'}}) " on

<button type="button" class="btn btn-default" {{ action doSearch "abc" }}>Return

[kumkanillam]

@NvnTiwari Like the error mentioned, it was not able to resolve actionName to call. if doSearch is property then either it should return functionName in string or doSearch function should be defined in corresponding context. I think in your case you can solve it using the quote for doSearch. {{ action 'doSearch' "abc" }}. if this doesn't fix it then create ember-twiddle which demonstrate the issue

[NvnTiwari]

Thanks @kumkanillam now its working.