1

私は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、salのデータテーブルを作成したいと思います。jquery.dataTables.min.jsを使用してデータテーブルを作成しています。次に、そのデータテーブルを「table-template」内にある「table-body」div内に挿入します。あなたの助けは大歓迎です。

4

2 に答える 2

2

テンプレートは次のようになります。

<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メソッド：

render: function () {
    console.log('render');
    var template = _.template($("#-template").html(), { info : info });
    this.$el.html(template);
}
于 2013-03-15T08:25:46.770 に答える
1

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

テンプレートのレンダリングが完了した後、データテーブルを初期化する必要があります。

于 2013-03-15T08:36:59.470 に答える