[英]How to Use Jquery Datatables in Ember 2.0
我最近开始学习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}}
我会很感激附有答案的演示。
干杯
好的,所以我还没有完成 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}}
希望能帮助到你
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.