如何在ember cli项目中使用jquery数据表

我正在使用jQuery插件数据表的一个ember项目。我已经将该插件包含在供应商文件夹中，并从ember-cli中引用它。到目前为止这么好，但我想根据列表中的用户选择动态更改表中的数据。我实现的方式是如何在ember cli项目中使用jquery数据表

index.hbs 
{{#data-table tHeaders=tHeaders elementId="myTableID" data=model}} 
    {{#each model as |model|}} 
     <tr> 
      <td>{{#link-to "anotherRoute" model.id}}{{model.id}}{{/link-to}}</td> 
      <td>{{ model.type }}</td> 
      <td><button {{action 'openModal' model.config}}>{{ model.type }}</button></td> 
     </tr> 
    {{/each}} 
{{/data-table}} 

data-table.hbs 
<thead> 
    <tr> 
     {{#each tHeaders as |tHeaders|}} 
      <th>{{tHeaders}}</th> 
     {{/each}} 
    </tr> 
</thead> 
<tbody> 
     {{yield}} 
</tbody> 

data-table.js 
import Ember from 'ember'; 
export default Ember.Component.extend({ 
    tagName:'table', 
    classNames:['table','table-bordered','table-striped','mb-none'], 
    uiSetup: function(){ 
     $('#myTableID').DataTable(); 
    }.on('didInsertElement').observes('data.[]') 
});

每当我点击我的名单上（在我的页面的左侧），我在做transitionToRoute相同的路线，但由于所选元素的变化ID模型的变化。

当我在左侧选择了不同的ID时，我的模型正在改变，数据表反映了新数据，但现有数据在下面。现在，当我单击排序标题时，表格将通过删除最新数据重置为以前的数据。

我过去3天一直在这个问题上，但没有任何改变。我走近这个问题的另一种方法是

index.hbs 
{{data-table tHeaders=tHeaders elementId="myTableID"}} 

data-table.hbs 
<thead> 
    <tr> 
     {{#each tHeaders as |tHeaders|}} 
      <th>{{tHeaders}}</th> 
     {{/each}} 
    </tr> 
</thead> 
<tbody> 
     {{yield}} 
</tbody> 

data-table.js 
import Ember from 'ember'; 
export default Ember.Component.extend({ 
    tagName:'table', 
    classNames:['table','table-bordered','table-striped','mb-none'], 
    uiSetup: function(){ 
    this._super(...arguments); 
    var table=$('#myTableID').DataTable(); 
    table.clear(); 
    var JSON=[]; 
    for (var i = this.get('data.currentState').length - 1; i >= 0; i--) { 
     var innerJSON=[]; 
     innerJSON.push("<a {{{action 'link1Clicked' 123}}}>"+this.get('data.currentState')[i].id+"</a>"); 
     innerJSON.push(this.get('data.currentState')[i]._data.type); 
     innerJSON.push("<button {{{action 'link2Clicked' 123}}}>"+this.get('data.currentState')[i]._data.config+"</button>"); 
     if (this.get('data.currentState')[i].id) { 
      JSON.push(innerJSON); 
     } 
    } 
    table.rows.add(JSON); 
    table.draw(); 
}.on('didInsertElement').observes('data.[]'), 
actions:{ 
    link1Clicked(){ 
     console.log('hello'); 
    } 
} 
});

对于第二种方法，一切工作正常，但我无法捕捉的行动项目，因为这些元素被动态地而不是创建为灰烬元素处理相反，他们是纯粹的HTML元素。

任何想法，我做错了，还是有什么更干净的方法来使用jQuery数据表在烬cli项目。

我也试过使用ember-cli-jquery-datatables插件，它只能用于静态数据，不能用于动态数据。

在此先感谢，任何帮助，将不胜感激。

来源

2016-07-27 iOS dev

建议：你确定你需要数据表吗？您可以尝试使用ember-models-table，它将提供数据表提供的所有类似功能，并且还动态绑定数据。 https://github.com/onechiporenko/ember-models-table –

@ManuBenjamin：它不是强制性的，我必须使用数据表。我会尝试烬模型表和更新你。感谢您的回复BTW –

是的，它工作正常，没有任何问题。谢谢@Manu，你为我节省了很多时间。 –

我在回答我自己的问题。

对于那些在集成jQuery数据表插件时遇到同样问题的人，我建议您不要把精力放在适合应用的jQuery数据表插件上，而应该使用ember-models-table插件明确与烬数据模型同步。它整合非常简单，

烬安装烬的模型表

用它在任何模板/文件作为

{{models-table data=model columns=columns}}

声明列在你的组件阵列。 js文件为

columns: [ 
    { 
     "propertyName": "id", 
     "title": "ID" 
    }, 
    { 
     "propertyName": "firstName", 
     "title": "First Name" 
    }, 
    { 
     "propertyName": "lastName", 
     "title": "Last Name" 
    }, 
    { 
      "propertyName": "city", 
      "title": "City" 
    } 
]

有许多自定义方法可供添加，请查看完整的功能列表参考http://onechiporenko.github.io/ember-models-table

来源

2016-07-27 16:38:55

如何在ember cli项目中使用jquery数据表

回答

相关问题