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

我的要求：我使用的是一个自定义选项卡组件，它有3-4个选项卡，选项卡上有上一个按钮。我想在单击“下一步”和“上一步”按钮时切换选项卡

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

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

谢谢

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

你可以这样做。 如果您不希望有变量

选项卡

，则使用javascript向当前单击的选项卡添加一个类，并删除现有的活动选项卡。 如果还需要什么，请告诉我

你可以这样做。 如果您不希望有变量

选项卡

，则使用javascript向当前单击的选项卡添加一个类，并删除现有的活动选项卡。

---

如果还需要什么，请告诉我。

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

Ember.Object.extend({
activeTab:null，
tabId:null，
isActive:Ember.computed（'activeTab'，'tabId'，function（）{
返回this.get（'activeTab.tabId'）==this.get（'tabId'）；
})
})

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

您也可以避免使用计算属性，只需遍历每个选项卡，并按照上述计算属性中提到的相同逻辑更新

isActive

属性：

this.get（'tabs'）.forEach（函数（tab）{
tab.set（'isActive'，tab.tabId===self.get（'ctrl.activeTab.tabId'）；
});

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

Ember.Object.extend({
activeTab:null，
tabId:null，
isActive:Ember.computed（'activeTab'，'tabId'，function（）{
返回this.get（'activeTab.tabId'）==this.get（'tabId'）；
})
})

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

您也可以避免使用计算属性，只需遍历每个选项卡，并按照上述计算属性中提到的相同逻辑更新

isActive

属性：

this.get（'tabs'）.forEach（函数（tab）{
tab.set（'isActive'，tab.tabId===self.get（'ctrl.activeTab.tabId'）；
});

看我的模板是这样的-。请检查并帮助使用适当的sol。我是新来的灰烬。我有“下一步-上一步”按钮，单击这些按钮时，选项卡应该会切换。您有选项卡和上一个下一个btn，还是只有上一个和下一个？在模板中看不到任何下一个和上一个btn是的，我没有添加按钮。但在实际的模板中，它也有普通的tab+按钮。让我更新fiddle with prev next buttons代码，并将整个选项卡放在一个组件中。表示有一个选项卡组件，然后每个选项卡内容都有子组件。我试图将类设置为属性，但它只适用于同一个组件。如何设置其他组件的属性（下一个按钮上第一个选项卡操作的第二个选项卡类属性）两个不同组件的任何特定原因？请参见我的模板如下-。请检查并帮助使用适当的sol。我是新来的灰烬。我有“下一步-上一步”按钮，单击这些按钮时，选项卡应该会切换。您有选项卡和上一个下一个btn，还是只有上一个和下一个？在模板中看不到任何下一个和上一个btn是的，我没有添加按钮。但在实际的模板中，它也有普通的tab+按钮。让我更新fiddle with prev next buttons代码，并将整个选项卡放在一个组件中。表示有一个选项卡组件，然后每个选项卡内容都有子组件。我试图将类设置为属性，但它只适用于同一个组件。我如何设置其他组件的属性（下一个按钮上第一个选项卡操作的第二个选项卡类属性）两个不同组件的任何特定原因？是的，我已经用这种方法设置了。但仍然没有得到触发点击的东西。在我的另一个需求中，我使用的是引导模式，目前我使用的是$（'#element'）.model（'show'）。正在寻找解决方案。如果你把一个只有最小部分的余烬旋转放在一起，我相信我们可以找到答案：）除此之外，我还有几个问题需要在概念上澄清。我对ember非常陌生，我想了解最佳实践和数据流结构，我不能在这里询问，因为它不是为了这个目的。你可以发送你的电子邮件或创建聊天链接或任何其他媒体，我可以问你这些事情吗？是的，我已经用这种方法做了。但仍然没有得到触发点击的东西。在我的另一个需求中，我使用的是引导模式，目前我使用的是$（'#element'）.model（'show'）。正在寻找解决方案。如果你把一个只有最小部分的余烬旋转放在一起，我相信我们可以找到答案：）除此之外，我还有几个问题需要在概念上澄清。我对ember非常陌生，我想了解最佳实践和数据流结构，我不能在这里询问，因为它不是为了这个目的。你可以发送你的电子邮件或创建聊天链接或任何其他媒体，我可以问你这些事情吗？

tabs:{
  firstTab:false,
  secondTab:false,

},
actions:{

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

  }

}