ember js与datatables插件 [英] ember js with datatables plugin

问题描述

我正在尝试使用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_每页记录
} 
}）; 
} 
}） ; 
  

句柄中的用法如下：

  {{＃查看App.TableView}} 
 {{view App.ListStaffView}} 
 {{/ view}} 
  

App.ListStaffView中有以下内容

 code> 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>电子邮件< / th> 
< / tr> 
< / thead> 
< tbody> 
 {{#each staff}} 
 {{view App.ShowStaffView staffBinding =this}} 
 {{/ each}} 
< / tbody> 
 
< tfoot> 
< div class =commands> 
 
< a class =btn btn-inversehref =＃{{actionshowNew}}> 
< i class =icon-plus>< / i> 
< / a> 
< a class =btn btn-inversehref =＃{{actionrefreshListing}}> 
< i class =icon-refresh>< / i> 
< / a> 
 
< / div> 
< / tfoot> 
  

加载后的错误就是这样

错误：无法对Metamorph执行操作

我用零配置进行了数据整合，失败了。由于Ember不能将数据插入到DOM中，所以JQuery datatable不断地说No data

解决方案

Datatables可以在一些预期的DOM结构与Ember同样的案例。如果您同时使用这两者，则会修改其他人的预期DOM结构。这是问题的原因。

如果您决定使用Ember，则使用Ember小部件库，如flame.js for TableViews。

I am trying the datatable jquery plugin with EMber JS. Looks like the moment Ember tries to update the DOM with some fresh data, it has a problem after datatable has styled and inserted some elements like search bar, twitter bootstrap pagination footer etc. The code is as follows

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

The usage in the handlebars is as follows:

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

The App.ListStaffView has the following in it

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

and the list template is as follows

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

The Error after loading this is like this

Error: Cannot perform operations on a Metamorph

I did the datatable integration with zero configuration and that failed. Since Ember cannot insert data into DOM, JQuery datatable keeps saying "No data"

解决方案

Datatables will work fine on some expected DOM structure, same case for Ember also. If you are using both, one will modify other's expected DOM structure. This is the reason for the problem.

If you are decided to use Ember, then use Ember widget libraries like flame.js for TableViews.

这篇关于ember js与datatables插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！