0

I am new in backbone.js and underscore.js. I am trying to create a sample application.

My code is: 

<script type="text/template" id="user-list-template">
    <table class = "table striped">
            <thead>
                <tr>
                    <th>User Name</th>
                    <th>Age</th>
                    <th>Location</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <% _.each(users, function(user){%>
                        <tr>
                            <td><% user.get('sUserName') %></td>
                            <td><% user.get('iAge') %></td>
                            <td><% user.get('sLocation') %></td>
                            <td></td>
                        </tr>
                <% }) %>
            </tbody>
    </table>
</script>

var UserList = Backbone.View.extend({
    el: '.page',
    render: function() {
        var that = this;
        var users = new Users;
        users.fetch({
            success: function(users) {
                alert("REST Service call was success");
                var template = _.template($('#user-list-template').html(), { users: users.models });
                that.$el.html(template);
                console.log('The content rendered here...');
            }
        })

    }
});

but I am getting this exception :

Uncaught ReferenceError: users is not defined
    at HTMLDivElement.eval (eval at m.template (underscore.js:1454), <anonymous>:6:9)
    at HTMLDivElement.c (underscore.js:1461)
    at n.access (jquery.min.js:3)
    at n.fn.init.html (jquery.min.js:3)
    at success ((index):64)
    at Object.t.success (backbone.js:1051)
    at j (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at x (jquery.min.js:4)
    at XMLHttpRequest.b (jquery.min.js:4)
Emile Bergeron
  • 17,074
  • 5
  • 83
  • 129
Marvel John
  • 193
  • 1
  • 3
  • 14
  • 1
    in add "=" like this `<%= user.get('sUserName') %>` and change `that.$el.html(template);` to `that.$el.html(template).toJSON();` – Przemek eS Feb 07 '17 at 12:22
  • See [this answer](http://stackoverflow.com/a/41148034/1218980) which explains what [_.template](http://underscorejs.org/#template) does and how to use it. – Emile Bergeron Feb 07 '17 at 14:56
  • 2
    @EmileBergeron They're probably using an old tutorial with a newer Underscore. Before 1.7 you could `_.template(tmpl, data)` but after 1.7 you have to use the two step process. There are some old tutorials that are still at the top of the Google results AFAIK. – mu is too short Feb 07 '17 at 18:02
  • @muistooshort yes quite possible. There are a lot of questions on this exact problem, that's why I didn't answered this one. – Emile Bergeron Feb 07 '17 at 18:29

1 Answers1

2

As pointed out, you should use <%= %> (or better yet <%- %> to be escaped), but your main problem looks to be the way you are calling the template.

The _.template() function in underscore in turn returns a reusable function, which you can call with different data.

var users = new Backbone.Collection([
 {sUserName: 'Alice', iAge: 35, sLocation: 'London'},
 {sUserName: 'Bob', iAge: 5, sLocation: 'Buenos Aires'}
]);
var template = _.template($('#user-list-template').html());
$('#result').html(template({users: users.models}));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<script type="text/template" id="user-list-template">
    <table class = "table striped">
            <thead>
                <tr>
                    <th>User Name</th>
                    <th>Age</th>
                    <th>Location</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <% _.each(users, function(user){%>
                        <tr>
                            <td><%- user.get('sUserName') %></td>
                            <td><%- user.get('iAge') %></td>
                            <td><%- user.get('sLocation') %></td>
                            <td></td>
                        </tr>
                <% }) %>
            </tbody>
    </table>
</script>
<div id="result"/>
mikeapr4
  • 2,830
  • 16
  • 24