Ember使用computed属性作为动作参数

Question

I'm building an app to be used on iOS and desktop. I need to add the on="eventType" parameter to some actions, and use mouseUp for desktop and touchEnd for mobile. I can't seem to add both like on="eventOne eventTwo" so I tried doing it as a computed property, but it doesn't seem to work:

<a {{action 'selectTab' 'location' on=clickEvent}} class="{{if locationSelected 'active'}}"><span class="mi-person"></span></a>
<a {{action 'selectTab' 'portfolios' on=clickEvent}} class="{{if portfolioSelected 'active'}}"><span class="mi-movie"></span></a>

---

export default Ember.Component.extend({
    session: Ember.inject.service(),
    clickEvent: Ember.computed('session.isCordova', function() {
        return this.get('session.isCordova') ? 'touchEnd' : 'mouseUp';
    }),
    actions: {
        selectTab:function(tab){
            console.log("TAB SELCTED");
            alert("TAB SELCTED");
            this.set('selectedTab', tab);
        }
    }
}

My other option is to duplicate it with an if statement, but I'd rather have an elegant solution.

Answer 1

You can add both event types to your element, It will look like this:

 <a {{action 'selectTab' 'location' on='touchEnd'}} {{action 'selectTab' 'location' on='mouseUp'}} class="{{if locationSelected 'active'}}">
      <span class="mi-person"></span>
    </a>
 <a {{action 'selectTab' 'portfolios' on='touchEnd'}} {{action 'selectTab' 'portfolios' on='mouseUp'}} class="{{if portfolioSelected 'active'}}">
   <span class="mi-movie"></span></a>

Source: Multiple actions in a single element

Answer 2

您可以利用内联手柄帮助程序并以这种方式编写代码而不是计算属性。

<a {{action 'selectTab' 'location' on=(if session.isCordova 'touchEnd' 'mouseUp')}} class="{{if locationSelected 'active'}}"><span class="mi-person"></span></a>