CODEWITHSUNDEEP
ember.js
Marek M.
Marek M.

Reputation: 3951

Assign two actions to one element in Ember.js

<span {{action 'toggleChildren' 'ServerObjects'}} {{action 'contextMenu' on='contextMenu'}}>{{server.name}}</span>

Unfortunatelly when I add this second action, the first one stops working. I can't find a way to assign two actions to one element.

I found this topic: Ember : handling multiple events with {{action}} tag? . Does it still apply?

Upvotes: 0

Views: 2179

Answers (2)

jmurphyau
jmurphyau

Reputation: 2309

That link no longer really applies - Views are being removed from Ember.

The way to do it is with a component for your span element:

Handlebars

{{my-span on-click=(action 'handleComponentSpanClick')
          on-context-menu=(action 'handleComponentSpanContextMenu')}}

JavaScript

App.MySpanComponent = Ember.Component.extend({
  tagName: 'span',
  click: function(e) {
    this.attrs['on-click'](e);
  },
  contextMenu: function(e) {
    this.attrs['on-context-menu'](e);
  }
});

Ember recently came out with improved {{action}}'s which allow you to put actions directly on HTML elements - for example a <span>s onclick:

<span onclick={{action 'handleRegularSpanClick'}}
      oncontextmenu={{action 'handleRegularSpanContextMenu'}}>
  Regular Span
</span>

JSBin

http://jsbin.com/jaxico/edit?html,js,output

Upvotes: 1

Piotr
Piotr

Reputation: 860

Maybe this isn't the answer you're looking for. But I would just use one action which would handle this click and either call other actions via this.send("actionName") or other methods in your controller (or whereever you handle the actions).

Upvotes: 0

Related Questions