如何以及在哪里初始化jQuery的数据表中的骨干视图

Question

我的HTML模板是这样的：

<script type="text/template" id="players-template"> 
     <table id="example" class="table table-striped table-bordered table-condensed table-hover"> 
      <thead> 
       <tr> 
        <th>Name</th> 
        <th>group</th> 
        <th></th> 
       </tr> 
      </thead> 
      <tbody id="playersTable"></tbody> 
     </table> 
    </script> 


    <script type="text/template" id="player-list-item-template"> 
     <td><@= name @></td> 
     <td> 
      <@ _.each(hroups, function(group) { @> 
      <@= group.role @> 
      <@ }); @> 
     </td>    
    </script> 

我的骨干观点如下：

playerView = Backbone.View.extend({ 
    template: _.template($("#player-template").html()), 
    initialize: function() 
     if(this.collection){ 
      this.collection.fetch(); 
    }, 
    render: function() { 
     this.$el.html(this.template); 
     this.collection.each(function(player) { 
      var itemView = new app.PlayerListItemView({ model: player }); 
      itemView.render(); 
      this.$el.find('#playersTable').append(itemView.$el); 
     },this 

}); 

// view to generate each player for list of players 
PlayerListItemView = Backbone.View.extend({ 
    template: _.template($('#player-list-item-template').html()), 
     tagName: "tr", 
     render: function (eventName) { 
     this.$el.html(this.template(this.model.toJSON())); 
     } 
    }); 

上面的代码完美的作品。现在，我想用jQuery的应用数据表插件wtih引导支持。你可以在这里找到细节：http://www.datatables.net/blog/Twitter_Bootstrap_2 所以，我刚添加的行内呈现为：

 render: function() { 
     this.$el.html(this.template); 
     this.collection.each(function(player) { 
       var itemView = new app.PlayerListItemView({ model: player }); 
       itemView.render(); 
       this.$el.find('#playersTable').append(itemView.$el); 
       $('#example').dataTable({ 
       console.log('datatable'); 
       "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i> <'span6'p>>", 
       "sPaginationType": "bootstrap", 
       "oLanguage": { 
        "sLengthMenu": "_MENU_ records per page" 
       }, 
       "aoColumnDefs": [ 
        { 'bSortable': false, 'aTargets': [ 2 ] } 
       ] 
      }); 
     },this); 

    }, 

现在，jQuery的确定年代未初始化。他们只是不正常的桌子。

• 我应该在哪里初始化应用jQuery数据表的表？
• 他们的工作完全没有骨干。

Answer 1

最有可能的jQuery插件需要的元素在页面上下工夫。你不显示你在哪里上查看呼叫render，但我会假设你正在做的事情是这样的：

var view = new PlayerView(); 
$('#foo').html(view.render().el); // this renders, then adds to page 

如果这是真的，那么使用插件里面呈现为时尚早，因为该视图的html尚未添加到页面中。

你可以试试这个：

var view = new PlayerView(); 
$('#foo').html(view.el); // add the view to page before rendering 
view.render(); 

或者你可以试试这个：

var view = new PlayerView(); 
$('#foo').html(view.render().el); 
view.setupDataTable(); // setup the jQuery plugin after rendering and adding to page