ember cli 프로젝트에서 jquery 데이터 테이블을 사용하는 방법

Question

jQuery 플러그인 데이터 테이블을 사용하는 Ember 프로젝트에서 작업하고 있습니다. 나는 벤더 폴더에 플러그인을 포함시키고 ember-cli에서 플러그인을 참조했다. 지금까지는 그렇게 좋았지 만 목록의 사용자 선택에 따라 동적으로 테이블의 데이터를 변경하려고합니다. 내가 구현하는 방법은 내가, 내가 같은 경로 만 선택 요소가 변경의 id 이후 모델 변경에 transitionToRoute을하고 있어요 (내 페이지의 왼쪽에있는) 내 목록을 클릭 할 때마다

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 요소는 내가 작업 항목을 캡처 할 수 있습니다 .

내가 뭘 잘못하고 있는지 또는 엠버 클리 프로젝트에서 jQuery 데이터 테이블을 사용하는 데 더 깔끔한 접근법이 있습니다.

정적 데이터에만 작동하지만 동적 데이터에는 작동하지 않는 ember-cli-jquery-datatables addon을 사용해 보았습니다.

미리 감사드립니다. 도움을 주시면 감사하겠습니다.

Answer 1

나는 내 자신의 질문에 대답하고 있습니다.

jQuery 데이터 테이블 플러그인을 통합 할 때 동일한 문제가있는 사람들에게는 ember-models-table add-on을 사용하여 japplet 데이터 테이블 플러그 인을 ember 앱에 적용하는 것이 좋습니다. 엠버 데이터 모델과 명확하게 동기화됩니다. 통합 그것의 아주 간단한,

1. 엠버 설치 엠버 - 모델 테이블

2. 이 구성 요소의 배열로 열을 선언

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

3. 으로 템플릿/파일의 모든에 사용합니다.

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

   많은 사용자 정의 방법은 기능의 전체 목록에 추가와 availabe 있습니다

   등의 js 파일하시기 바랍니다 http://onechiporenko.github.io/ember-models-table