如何在 Ember 2.0 中使用 Jquery 數據表

Question

我最近開始學習emberJS ，但在做一些我在不使用這個框架時會做的基本事情時遇到了問題。 我已經使用jQuery插件必須的主要問題，在這種情況下，jQuery的數據表

在我的組件的 component.js 中

import Ember from 'ember';
export default Ember.Component.extend({
    didInsertElement: function(model){
        Ember.run.scheduleOnce('afterRender', this, function(model) {
            this.$(".datatables").DataTable();
        });
    }
});

在我組件的 template.hbs 中

<table class="table table-hover datatables">
    <thead>
        <tr>
            <th>Course Name</th>
            <th>Course Title</th>
            <th class="text-center">Actions</th>
        </tr>
    </thead>
    <tbody>
        {{#each courses as |course|}}
        <tr>
            <td> {{ course.name }} </td>
            <td> {{ course.title }} </td>
            <td  class="text-center"> {{#link-to 'courses.edit' course }} Edit {{/link-to}} </td>
        </tr>
        {{/each}}
    </tbody>
</table>

**然后我使用了這樣的組件：- **

{{#course-datatable courses=model}}{{/course-datatable}}

我會很感激附有答案的演示。

干杯

Answer 1

好的，所以我還沒有完成 jquery 數據表插件的組件。 但是對於其他 Jquery 插件，它或多或少會像這樣。 如果您正在構建自己的組件：添加 Datatable js 文件以包含在您的 BrocFile 中

在 ember 客戶端中運行

ember g my-jquery-datatable

這將在生成的 hbs 中生成組件填寫您將使用的一般 html

    <table id="example" class="display" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>

                </tr>
         </thead>
    {{#each modelWithData}}
    <tr>
    <td>this.name</td>
    <td>this.position</td>
    </tr>
    {{/each}}
</table>

然后在你 js 生成的文件上啟動 didInsertElementMethod 中的插件

export default Ember.Component.extend({
    didInsertElement(){
       this.$('#example').DataTable();
}
});

然后能夠在其他組件或控制器中使用此表，您可以這樣做

{{my-jquery-datatable modelWithData=otherArrayWithTheTableAttributes}}

希望能幫助到你