ember js with datatables plugin

Question

Я пытаюсь подключить djatery плагин с Ember JS. Похоже, момент Эмбер пытается обновить DOM со свежими данными, то есть проблема, после того, как DataTable имеет стиль и вставить некоторые элементы, такие как панель поиска, Twitter Bootstrap пагинации сноски и т.д. Код выглядит следующим образом

App.TableView = Em.View.extend({ 
    classNames:['table','table-striped','table-bordered','dataTable'], 
    tagName:'table', 
    didInsertElement:function(){ 
     this.$().dataTable({ 

      "sPaginationType": "bootstrap", 
      "oLanguage": { 
       "sLengthMenu": "_MENU_ records per page" 
      } 
     }); 
    } 
}); 

использование в рулях выглядит следующим образом:

{{#view App.TableView }} 
     {{view App.ListStaffView}} 
{{/view}} 

App.ListStaffView имеет следующие в нем

App.ListStaffView = Ember.View.extend({ 
    templateName: 'list', 
    staffBinding: 'App.staffController', 

    showNew: function() { 
    this.set('isNewVisible', true); 
    }, 

    hideNew: function() { 
    this.set('isNewVisible', false); 
    }, 

    refreshListing: function() { 
    App.staffController.findAll(); 
    } 
}); 

и шаблон списка выглядит следующим образом

<thead> 
         <tr> 
         <th>Name</th> 
         <th>Email</th> 
         </tr> 
         </thead> 
         <tbody> 
         {{#each staff}} 
         {{view App.ShowStaffView staffBinding="this"}} 
         {{/each}} 
         </tbody> 

         <tfoot> 
         <div class="commands"> 

         <a class="btn btn-inverse" href="#"{{action "showNew"}}> 
          <i class="icon-plus"></i> 
         </a> 
         <a class="btn btn-inverse" href="#"{{action "refreshListing"}}> 
          <i class="icon-refresh"></i> 
         </a> 

         </div> 
         </tfoot> 

Ошибка после загрузки это как этот

Ошибка: Не удается выполнить операции на Metamorph

Я сделал DataTable интеграцию с нулевой конфигурации и не удалось. Поскольку Ember не может вставлять данные в DOM, JQuery datatable продолжает говорить «Нет данных»

Answer 1

Datatables будет работать нормально в некоторой ожидаемой структуре DOM, в том же случае для Ember. Если вы используете оба варианта, один изменит ожидаемую структуру DOM. Это и есть причина проблемы.

Если вы решили использовать Ember, используйте библиотеки виджетов Ember, такие как flame.js для TableViews.

Answer 2

Вы не можете использовать помощника #each внутри таблицы, которая будет «переопределена» таблицей DataTables.

Answer 3

У меня была такая же проблема, и мне удалось обойти проблему, вызвав rerender() в представлении, которое содержит таблицу.

Например, на мой взгляд, у меня есть метод, называемый editRow(), который изменяет текст таблицы, который должен быть введенным. Вот как я это сделал:

 

    editRow: function(event) 
    { 
     var obj = event.context; 
     obj.setIsEditing(true); 
     this.rerender(); 
    }