如何使用Underscore将数据放入表中?

时间:2014-04-22 10:11:01

标签: backbone.js underscore.js

我有一个问题 - 如何将方法fetch()中的数据放入HTML? 因为当我尝试这样做时,没有任何渲染!

define([
        "underscore",
        "backbone",
        "jquery",
        "pages/RestaurantPage/collections/UsersCollection",
        "text!pages/RestaurantPage/templates/UsersTable.html"
    ],

    function(_, Backbone, $, UsersCollection, UsersTable) {
        return Backbone.View.extend({
            el: $('#data_table'),
            render: function() {
                that = this;
                var users = new UsersCollection;
                users.fetch({
                    success: function(users) {
                        var template = _.template($('#data_table').html(), {
                            'users': users.toArray()
                        });
                    that.$el.html(UsersTable);
                    }
                });
            }
        });
    });

和我的HTML文件:

<table align="center" border="1" cellpadding="1" cellspacing="1" >


   <caption>
     All users
   </caption>

   <thead>
     <tr>

       <th scope="col">Name</th>

       <th scope="col">Last name</th>

       <th scope="col">Login</th>

       <th scope="col">Email</th>

       <th scope="col">Role</th>

       <th scope="col">Edit</th>

       <th scope="col">Delete</th>

       <th scope="col">
         <form id="deleteall" method="post" action="/deleteall" name="deleteall"></form>

         <div class="small success btn">
           <input type="submit" value="X" form="deleteall" />
         </div>
       </th>

     </tr>
   </thead>

   <tbody>

<% _.each(users, function(user, key, list) { %>
     <tr>
       <td><%= key %></td>

       <td><%- user.get('l_name') %></td>

       <td><%- user.get('f_name') %></td>

       <td><%- user.get('email') %></td>

       <td><%- user.get('id_role') %></td>
<% }) %>

       <td>

     </tr>
   </tbody>

 </table>

我想把我的收藏品放在桌子上......我该怎么办? 因为当我尝试渲染它时,我得到没有数据的空白页。

1 个答案:

答案 0 :(得分:0)

你正在制作一个空div的模板。您想要制作HTML模板:

<script type="text/template" id="my_template">
    <table align="center" border="1" cellpadding="1" cellspacing="1" >
         ...
    </table>
</script>

然后在模板函数中使用模板的ID:

var template = _.template($('#my_template').html(), {
      'users': users.toArray()
});