Question

我最近学习了 emberJS ，而且我在做一些基本的事情时遇到了一些问题，而不是使用这个框架。我遇到的主要问题是使用 jquery插件，在这种情况下是jquery datatables

在我的组件的component.js

中

filter {"files:**_win.cpp", "platforms:not win"}
    flags "ExcludeFromBuild"               

filter {"files:**_xone.cpp", "platforms:not xone"} 
    flags "ExcludeFromBuild"

filter {"files:**_ps4.cpp", "platforms:not ps4" }
    flags "ExcludeFromBuild"

在我的组件的template.hbs

中

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

**然后我使用了以下组件： - **

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

我很感激一个带有答案的演示。

欢呼声

Answer 1

好的，所以我还没有完成jquery datatable插件的组件。但是对于其他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>

然后在你生成的文件中启动了didInsertElementMethod

中的插件

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

然后能够在其他组件或控制器中使用此表

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

希望有所帮助

如何在Ember 2.0中使用Jquery数据表

1 个答案: