Question

我正在进行一个使用jQuery插件数据表的ember项目。我已将该插件包含在vendor文件夹中并从ember-cli引用它。到目前为止一切顺利，但我想根据列表中的用户选择动态更改表中的数据。我实施的方式是

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

对于第二种方法，一切都运行正常，但我无法捕获动作项，因为这些元素是动态创建的，而不是作为ember元素处理，而是纯HTML元素。

任何想法，我在哪里做错了，或者在ember cli项目中使用jQuery数据表有更清晰的方法。

我也尝试使用ember-cli-jquery-datatables addon，它只适用于静态数据，但不适用于动态数据。

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

Answer 1

我正在回答我自己的问题。

对于那些在集成jQuery数据表插件方面遇到同样问题的人，我建议不要把你的精力放在将jQuery数据表插件嵌入到ember app中，而是使用ember-models-table附加组件与ember数据模型同步。它很容易集成，

ember install ember-models-table

在您的任何模板/文件中使用它

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

将component.js文件中的列声明为

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

有许多自定义方法可供添加，有关功能的完整列表，请参阅Perfect Margins, page 2

如何在ember cli项目

1 个答案: