Ember js - 在按钮单击时触发其他元素的单击事件

Question

我的要求：我正在使用一个自定义选项卡组件，该组件具有 3-4 个选项卡，选项卡上还有下一个上一个按钮。我想在单击下一个、上一个按钮时切换选项卡。

我

的方法：我试图在单击下一个按钮时触发选项卡上的单击事件，就像通常当我们单击相关选项卡内容显示的选项卡时一样。

我可以用jquery做同样的事情，但是我们如何在余烬中做到这一点呢？我正在使用余烬 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}}

我的组件.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 将类添加到当前单击的选项卡并删除现有的活动选项卡。如果还需要什么，请告诉我。

Answer 2

如果您只是想让不同的选项卡知道哪个选项卡处于活动状态，请创建一个选项卡对象：

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

然后在控制器中，创建选项卡并将它们全部传递给对活动选项卡的引用。单击按钮时更新活动选项卡，并在单击下一个/上一个按钮时按某种顺序更新活动选项卡。在更改活动选项卡时，所有按钮都会触发该计算属性，询问它们是否处于活动状态，其中一个按钮将处于活动状态。

您还可以避免计算属性，只需循环访问每个选项卡，然后通过与上述计算属性中提到的相同逻辑更新isActive属性： this.get('tabs').forEach(function(tab){ tab.set('isActive', tab.tabId === self.get('ctrl.activeTab.tabId')); });