Как использовать JQuery Datatables в Ember 2.0

Question

В последнее время я взял обучение emberJS, и у меня были проблемы с некоторыми основными вещами, которые я бы сделал, не используя эту инфраструктуру. Основные вопросы, которые я имел, был с помощью JQuery плагинов, в этом случае JQuery DataTables

в component.js моего компонента

import Ember from 'ember'; 
export default Ember.Component.extend({ 
    didInsertElement: function(model){ 
     Ember.run.scheduleOnce('afterRender', this, function(model) { 
      this.$(".datatables").DataTable(); 
     }); 
    } 
}); 

в template.hbs моего компонента

<table class="table table-hover datatables"> 
    <thead> 
     <tr> 
      <th>Course Name</th> 
      <th>Course Title</th> 
      <th class="text-center">Actions</th> 
     </tr> 
    </thead> 
    <tbody> 
     {{#each courses as |course|}} 
     <tr> 
      <td> {{ course.name }} </td> 
      <td> {{ course.title }} </td> 
      <td class="text-center"> {{#link-to 'courses.edit' course }} Edit {{/link-to}} </td> 
     </tr> 
     {{/each}} 
    </tbody> 
</table> 

** тогда я использовал компонент, как: - **

{{#course-datatable courses=model}}{{/course-datatable}} 

Я был бы признателен за демонстрацию в сопровождении с ответами.

веселит

Answer 1

Ok, так что я не сделал компонент JQuery DataTable плагин. Но да для других плагинов JQuery, это было бы более или менее так. Если вы строите свой собственный компонент: Добавить в DataTable расслоения плотных файлов включить внутри BrocFile

Запуска в Ember клиенте

ember g my-jquery-datatable 

это будет генерировать компонент в сгенерированном HBS заполнить общую HTML вы использовать

<table id="example" class="display" cellspacing="0" width="100%"> 
      <thead> 
       <tr> 
        <th>Name</th> 
        <th>Position</th> 

       </tr> 
     </thead> 
    {{#each modelWithData}} 
    <tr> 
    <td>this.name</td> 
    <td>this.position</td> 
    </tr> 
    {{/each}} 
</table> 

затем вы Js генерироваться файл инициировать плагин в didInsertElementMethod

export default Ember.Component.extend({ 
    didInsertElement(){ 
     this.$('#example').DataTable(); 
} 
}); 

затем, чтобы иметь возможности использовать эту таблицу в других компонентах или контроллерах вы можете сделать

{{my-jquery-datatable modelWithData=otherArrayWithTheTableAttributes}} 

Надеются, что это помогает