How to render tables in Underscore/Backbone?

S

semolex2014-04-22 13:38:45

backbone.js

semolex, 2014-04-22 13:38:45

Hello! There is the following problem - there is a separate html file with a table that needs to be rendered on the main page (I use require.js to connect)
There is data received using the fetch () method. The problem is that the variables are not rendered on the page... If I enclose them in a script tag, the table disappears altogether...
Here is my code. What am I doing wrong?

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><%- user.get('l_name') %></td>

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

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

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

       <td>
         <div class="small success btn">
           <a href='/edit_user?id={{usr.id}}'>Edit</a>
         </div>
       </td>

       <td>
         <div class="small success btn">
           <input type='button' onclick="document.location='/delete_user?id={{usr.id}}'"
           value="Delete" />
         </div>
       </td>

       <td><input form="deleteall" name="ch_{{usr.id}}" type="checkbox" value=
       "{{usr.id}}" style="align:center;" /></td>
     

     </tr>
   </tbody>

 </table>

IndexPage:

<!DOCTYPE html>

   <head>
       
       
       <title>Title</title>


 
   </head>
   <body>
       <div class="row navbar metro" id="nav1"></div>
     <div id = "content"></div>
<table id = "data_table"></table>
   
     <link rel="stylesheet" type="text/css"
   href="static/css/gumby.css">
   <script type=text/javascript data-main="static/js/main.js"src="static/js/libs/requirejs/require.js"></script>
     </body>
</html>

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

P

personaljs, 2014-04-22
@semolex

success: function(users) {
       that.$el.append(UsersTable({
                'users': users
            }));
}

try like this

A

Arkady Butermanov, 2014-04-22
@Arkadey

Probably it is worth passing the rendered collection, and not the connected template?
And, by the way, apparently after rendering you will get one table in another.