如何以及在哪里初始化骨干视图的jQuery的数据表 [英] how and where to initialize jquery datatable in backbone view

问题描述

我的HTML模板是这样的：

My html template look like this:

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

我的看法骨干如下：

My backbone view is as follows:

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

以上code完美的作品。现在，我想用jQuery的应用插件的DataTable引导wtih支持。你可以在这里找到细节： http://www.datatables.net/blog/Twitter_Bootstrap_2
所以，我刚才添加的行内渲染：

The above code works perfectly. Now, I want to use apply jquery datatable plugin wtih bootstrap support. You can find detail here :http://www.datatables.net/blog/Twitter_Bootstrap_2 So, I just added the line inside render as:

        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的确定时代未初始化。他们只是diisplay常规表。

Now, the jquery datable is not initialized. They just diisplay normal table.

• 我应该在哪里intialized表申请jQuery的数据表？


• 他们的工作不完美的骨干。

推荐答案

最有可能的jQuery插件需要的元素在页面上下工夫。你不显示你在哪里调用渲染上的观点，但我会假设你正在做这样的事情：

Most likely, the jQuery plugin needs the elements to be on the page to work. You don't show where you are calling render on that view, but I am going to assume you are doing something like this:

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

如果这是真的话，那么使用插件里面呈现为时尚早，因为视图的HTML是没有添加到页面。

If this is true, then using the plugin inside render is too early, since the view's html is not yet added to the page.

您可以试试这个：

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

或者你可以试试这个：

Or you can try this:

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

这篇关于如何以及在哪里初始化骨干视图的jQuery的数据表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！