成员js -单击按钮上的其他元素上的触发器单击事件

Question

My Requirement:我使用的是一个自定义选项卡组件，它有3-4个选项卡，还有下一个选项卡上的按钮。我想切换标签时，单击下一步，前几个按钮。

我的方法:当单击next按钮时，试图在选项卡上触发单击事件，通常情况下，当我们单击相关选项卡内容显示的选项卡时。

我也可以用jquery做同样的事情，但是我们如何在ember中做到这一点呢？我使用的是余烬2.16。有人能在这方面提供帮助或建议是否有更好的方法来实现这一要求。

谢谢。

Answer 1

My-component.hbs

<ul class="my-tabs">

   <li class="{{if tabs.firstTab 'active' ''}}" {{action 'switchTab' 'firstTab'}}>Tab1</li>
   <li class="{{if tabs.secondTab 'active' ''}}" {{action 'switchTab' 'secondTab'}}>Tab2
   </li>

</ul>
{{#if tabs.firstTab}}
   //content for first tab
{{/if}}
{{#if tabs.secondTab}}
   //content for second tab
{{/if}}

My-component.js

tabs:{
  firstTab:false,
  secondTab:false,

},
actions:{

  switchTab(currentTab){
     this.get('tabs').setProperties({
       firstTab:false,
       secondTab:false
     });
     this.get('tab').set(''+currentTab,true);

  }

}

你可以做这样的事。如果不希望变量tabs，那么使用javascript将类添加到当前单击的选项卡中，并删除现有的active选项卡。如果还需要什么，请告诉我。

Answer 2

如果您只是想让不同的选项卡知道哪个是活动的，那么创建一个tab对象：

Ember.Object.extend({ activeTab: null, tabId: null, isActive: Ember.computed('activeTab', 'tabId', function(){ return this.get('activeTab.tabId') === this.get('tabId'); }) })

然后在您的控制器中，创建您的选项卡，并将它们全部传递给active选项卡。单击按钮时更新活动选项卡，并按单击下一个/前一个按钮的顺序更新。在更改active选项卡时，所有按钮都会触发计算属性，询问它们是否是活动的，其中一个将是活动的。

您还可以避免计算属性，只需遍历每个选项卡，并按照上面的计算属性中提到的相同逻辑更新isActive属性：this.get('tabs').forEach(function(tab){ tab.set('isActive', tab.tabId === self.get('ctrl.activeTab.tabId')); });。