带有数据表插件的 ember js答案

【问题标题】：ember js with datatables plugin带有数据表插件的 ember js
【发布时间】：2012-06-28 09:44:27
【问题描述】：

我正在尝试使用 EMber JS 的数据表 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"
           }
       });
    }
});

车把中的用法如下：

{{#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 执行操作

我使用零配置进行了数据表集成，但失败了。由于 Ember 无法向 DOM 插入数据，因此 JQuery 数据表一直说“没有数据”

【问题讨论】：

标签： jquery-plugins datatables ember.js

【解决方案1】：

数据表可以在一些预期的 DOM 结构上正常工作，Ember 也是如此。如果你同时使用两者，一个会修改另一个预期的 DOM 结构。这就是问题的原因。

如果您决定使用 Ember，请使用 Ember 小部件库，例如 Flame.js 用于 TableViews。

【讨论】：

【解决方案2】：

您不能在将被 DataTables 表“覆盖”的表中使用 #each Helper。

【讨论】：

我发现了这个codebrief.com/2012/03/… POint #7。今天会试一试。

【解决方案3】：

我遇到了同样的问题，并且能够通过在包含表的视图上调用 rerender() 来解决该问题。

例如，在我看来，我有一个名为 editRow() 的方法，它将表格文本更改为输入框。这是我的做法：

编辑行：函数（事件） { var obj = event.context; obj.setIsEditing(true); this.rerender(); }

【讨论】：