Question

我正在尝试在我的Ember.js项目中使用bootstrap accordion component。我看过很多解决方案，包括：

ember.js and bootstrap accordion - the "ember way" of creating the view
http://indexiatech.github.io/ember-components/
和http://kaliber5.github.io/ember-bootstrap/

第一个链接似乎有点过时，但提供了一些有用的信息。第二个链接实际上有一个工作的手风琴组件，但我不想包含其他所有内容。最后一个链接有许多组件，但手风琴组件。所以，我决定快速实现我自己的一个：

在我的模板中：

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

组件javascript：

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

然而，这是有效的，我想知道是否有一个更好的＆＃39; Ember＆＃39;实现这个目标的方式？

Ember.js和Bootstrap手风琴效果

0 个答案: