Question

我的要求：我正在使用自定义标签组件，该组件有3-4个标签，标签上有下一个上一个按钮。我希望在点击下一个按钮时切换标签。

我的方法：当我们点击相关标签内容显示的标签时，我一直试图在点击下一个按钮时触发标签上的点击事件。

我可以用jquery做同样的事情，但我们怎么能在ember中做到这一点？我正在使用 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将类添加到当前单击的选项卡并删除现有的活动选项卡。如果还有其他需要，请告诉我。

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

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

2 个答案: