ember js with datatables plugin

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"

回答1:

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.

回答2:

I had the same problem and was able to get around the issue by calling rerender() on the view that holds the table.

For example, in my view I have a method called editRow() that changes the table text to be input boxes. Here is how I did it:


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

回答3:

You cannot use the #each Helper inside a table which will be "overridden" by a DataTables table.