ember cliプロジェクトでjqueryデータ型を使用する方法

Question

私はjQueryプラグインのデータテーブルを使用しているemberプロジェクトに取り組んでいます。私はベンダーのフォルダにプラグインを含め、ember-cliからプラグインを参照しました。これまでのところ良いことだが、リストのユーザー選択に従って動的にテーブル内のデータを変更したい。私は（私のページの左側に）、私は同じルートにtransitionToRouteをやっているが、選択された要素の変更のID以降のモデルチェンジ私のリストをクリックするたびに、私は実装方法が

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

です。

左側に別の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要素であり、動的に作成され、燃えさし要素として扱われていなかったので、私はアクション項目を捕らえることができませんでした。

私は間違っていると思いますが、ember cliプロジェクトでjQueryデータテーブルを使用する方がはるかにクリーンな方法があります。

また、静的データに対してのみ動作し、動的データに対しては機能しないember-cli-jquery-datatables addonを使用してみました。

ご協力いただきありがとうございます。

Answer 1

私は自分自身の質問に答えています。

jQueryデータテーブルプラグインを統合する際に同じ問題を抱えている人にとって、私は、emberアプリケーションにプラグインするjQueryデータ型をフィッティングするのではなく、ember-models-tableアドオンを使用することをお勧めします。 emberデータモデルと明確に同期しています。

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

としてテンプレート/ファイルのいずれかでそれを使用して、

1. エンバーエンバー・モデル・テーブルをインストール

2. を統合するために、その非常に単純では、コンポーネントの配列として列を宣言します。 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