CODEWITHSUNDEEP
ember.js
Jmorvan
Jmorvan

Reputation: 1040

Ember bind action from property

In Ember I am trying to bind an action in a template from a property in the view.

App.MyView = Ember.View.extend({
items: [
    {title: Em.I18n.t("admin.action.clone"), icon: "copy", action: "clone"},
    {title: Em.I18n.t("admin.action.new"), icon: "plus", action: "new"}
]
});

and in the template:

{{#each itm in view.items}}
        <a {{action itm.action}}>{{itm.title}}</a>
{{/each}}

Action takes the literal string itm.action and doesnt execute the binding. resulting in an error saying itm.action wasnt handled.

Is there a way I can make the action helper execute that binding before it goes bubbling for an action?

Upvotes: 1

Views: 1170

Answers (1)

Panagiotis Panagi
Panagiotis Panagi

Reputation: 10077

A workaround is to trigger the item-specific action in a proxy handler method:

View

App.MyView = Ember.View.extend({
  items: [
    {title: Em.I18n.t("admin.action.clone"), icon: "copy", action: "clone"},
    {title: Em.I18n.t("admin.action.new"), icon: "plus", action: "new"}
  ],

  actions: {
    handleItemClick: function(item) {
      var action = item.get('action');
      this.send(action);
    }
  }
});

Template

{{#each itm in view.items}}
  <a {{action "handleItemClick" itm target="view"}}>{{itm.title}}</a>
{{/each}}

EDIT:

Dynamic action names are now in master. Have a look at: https://github.com/rjackson/ember.js/commit/7396b37172b59e27647a07574ea7051ab06d001a

Upvotes: 2

Related Questions