Jquery plugins 带有datatables插件的ember js

我正在试用带有EMber JS的datatable jquery插件。看起来当Ember试图用一些新数据更新DOM时，datatable设置了样式并插入了一些元素（如搜索栏、twitter引导分页页脚等）后出现了问题。代码如下

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"
           }
       });
    }
});

<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>

把手的用途如下：

{{#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();
  }
});

列表模板如下所示

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"
           }
       });
    }
});

<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>

名称
电子邮件
{{{每位员工}
{{view App.ShowStaffView staffBinding=“this”}
{{/每个}}

加载后的错误如下所示

错误：无法对变形执行操作

---

我用零配置进行了datatable集成，但失败了。由于Ember无法将数据插入DOM，jQueryDataTable一直说“没有数据”

Datatables在某些预期的DOM结构上可以正常工作，Ember也是如此。如果两个都使用，其中一个将修改另一个的预期DOM结构。这就是问题的原因

---

如果您决定使用Ember，那么将Ember小部件库（如flame.js）用于TableView。

您不能在一个将被DataTables表“覆盖”的表中使用

#每个
帮助程序。
我也遇到了同样的问题，并且能够通过对保存该表的视图调用rerender（）来解决这个问题

例如，在我的视图中，我有一个名为editRow（）的方法，该方法将表文本更改为输入框。我是这样做的：

editRow: function(event)
    {
        var obj = event.context;
        obj.setIsEditing(true);
        this.rerender();
    }
editRow:函数（事件）
{
var obj=event.context；
对象设置编辑（真）；
这个；
}
我找到了这一点。我今天就试试。