Question

我正在构建一个可在iOS和桌面上使用的应用。我需要在某些操作中添加on =“eventType”参数，并将mouseUp用于桌面，将touchEnd用于移动设备。我似乎无法像on =“eventOne eventTwo”那样添加两者，所以我尝试将其作为计算属性，但它似乎不起作用：

<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);
        }
    }
}

我的另一个选择是用if语句复制它，但我宁愿有一个优雅的解决方案。

Answer 1

您可以将两种事件类型添加到元素中，它将如下所示：

 <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>

资料来源：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>

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

2 个答案: