Jquery Ember.js和Bootstrap手风琴效果
我正在尝试在我的Ember.js项目中使用。我研究了许多解决方案,包括:Jquery Ember.js和Bootstrap手风琴效果,jquery,twitter-bootstrap,ember.js,Jquery,Twitter Bootstrap,Ember.js,我正在尝试在我的Ember.js项目中使用。我研究了许多解决方案,包括: 及 第一个链接似乎有点过时,但提供了一些有用的信息。第二个链接实际上有一个工作的手风琴组件,但我不想包括所有其他内容。最后一个链接有许多组件,但手风琴组件除外。因此,我决定快速实施我自己的一个: 在我的模板中: <div class="cw-filter-group" id="accordion" role="tablist" aria-multiselectable="true"> <div
<div class="cw-filter-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
{{#accordion-panel data-toggle="collapse" data-parent="#accordion" data-href="#collapseOne" data-aria-expanded="true" data-aria-controls="collapseOne"}}
Search Filters:
{{/accordion-panel}}
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<!--Whatever needs to be displayed in collapsible panel goes here -->
</div>
</div>
</div>
</div>
然而,这是可行的,我想知道是否有更好的“余烬”方式来实现这一点
<div role="button" data-toggle="{{data-toggle}}" data-parent="{{data-parent}}" aria-expanded="{{data-aria-expanded}}" aria-controls="{{data-aria-controls}}" {{action "toggleCollapse"}}>
{{yield}}
</div>
import Ember from 'ember';
export default Ember.Component.extend({
actions: {
toggleCollapse: function() {
Ember.$(this.get('data-parent') ).find(this.get('data-href')).slideToggle();
this.toggleProperty('data-aria-expanded');
}
}
});