Question

我在html中有模板

<script type="text/template" id="table-template">
     <div id="table-body"></div>                        
 </script>

我的骨干视图看起来像这样

var app = app || {};
$(function ($) {
    'use strict';
    info = [
        {
            "id": 1,
            "Age": 70,
            "salary": 700000,
            "name": "Mike",
        },
        {
            "id": 2,
            "Age": 18,
            "salary": 30000,
            "name": "Mike",
        },
    ];
    app.infoView = Backbone.View.extend({
        initialize: function () {
            console.log('initialize');
        },
        drawinfoTable: function () {
            console.log('create datatable');
            $('#test').dataTable({
                "aaData": groupdata,
                "aoColumns": [
                    { "mDataProp": "id" },
                    { "mDataProp": "age" },
                    { "mDataProp": "sal" },
                    { "mDataProp": "active" },
                    { "mDataProp": "name" }
                ]
            });
        }
        render: function () {
            console.log('render');
            var template = _.template($("#-template").html(), {});
            this.$el.html(template);
        }
    });
});

实际上使用上面的json数据，我想创建列名为id，sal，active＆amp;的数据表。萨尔。我正在使用jquery.dataTables.min.js来创建数据表。然后，我想在“table-body”div中插入该数据表，该div存在于“table-template”中。非常感谢您的帮助。

Answer 1

您的模板应如下所示：

<script type="text/template" id="table-template">
     <div id="table-body">
         <table>
             <tr>
                 <th>id</th>
                 <th>age</th>
                 <th>salary</th>
                 <th>name</th>
             </tr>
             <% _.each(info, function(data, index) { %>
             <tr>
                  <td><%= data.id %></td>
                  <td><%= data.Age %></td>
                  <td><%= data.salary %></td>
                  <td><%= data.name %></td>
             </tr>
             <% }); %>
         </table>
     </div>                        
</script>

渲染方法：

render: function () {
    console.log('render');
    var template = _.template($("#-template").html(), { info : info });
    this.$el.html(template);
}

Answer 2

@Sylvanus已经回答了如何渲染视图。您所需要的只是激活数据表。

尝试对其渲染功能进行以下修改

render: function () { console.log('render'); var template = _.template($("#-template").html(), { info : info }); this.$el.html(template); //initialize datatable this.$el.find('#table-body').find('table').dataTable(); }

您只需在模板渲染完成后初始化Data表。

为骨干创建模板以在视图中填充json数据

2 个答案: