How to put data in table with Underscore?

Question

I have a question - how to put data from method fetch() into HTML? Cause when I try to do that, nothing rendering!

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

and my HTML file:

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

I want to render my collection in table...what can i do? Cause when I try to render it, I`m getting blank page with no data.

Answer 1

You are making a template of an empty div. You want to make a template of your HTML as such:

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

Then in your template function use the ID of the template:

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