如何在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數據表

回答

相關問題