Using Backbone.js with Underscore.js and Handlebars.js

Underscore.js is the default templating engine for Backbone.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html>
<head>
<title>Backbone Application</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
</head>
<body>
 
<div class="content"></div>
 
<script type="text/template" id="person-list-template">
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <% _.each(value, function(person) { %>
      <tr>
        <td><%= person.get('name') %></td>
        <td><%= person.get('email') %></td>
      </tr>
    <% }); %>
  </tbody>
</table>
</script>

<script type="text/javascript">

var Person = Backbone.Model.extend({
    defaults: {
        name: 'Dave Smith',
        email: 'dave@bb.com'
    }
});
 
var doe = new Person({ id: 1, name: 'John Doe', email: 'johndoe@bb.com' });
var hancock = new Person({ id: 2, name: 'John Hancock', email: 'johnhancock@bb.com' });
var jefferson = new Person({ id: 3, name: 'Thomas Jefferson', email: 'thomasjefferson@bb.com'});


var Persons = Backbone.Collection.extend({
    model: Person
});
 
var personArray = [doe, hancock, jefferson];
var persons = new Persons(personArray);  


var template = _.template($('#person-list-template').html(), {value: persons.models});
/*
At this point we could use:
var template = _.template($('#person-list-template').html(), {value: persons.toJSON()});
If we do then the iterator becomes
<% _.each(value, function(person) { %>
      <tr>
        <td><%= person.name %></td>
        <td><%= person.email %></td>
      </tr>
    <% }); %>
*/

$(".content").html(template);

var PersonsListView = Backbone.View.extend({
    el: '.content',
     
    initialize:function(){
        this.render();
    },
    render: function () {
        this.$el.html(template);
    }
});
var personslistview = new PersonsListView();


</script>

</body>
</html>

However, some people prefer other options. Handlebars is very popular and uses the mustache style syntax which involves the use of {{ brackets }} to indicate dynamic values.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html>
<head>
<title>Backbone Application</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<script src ="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.4/handlebars.js"></script>
</head>
<body>
 
<div class="content"></div>
 
<script id="person-list-template" type="text/x-handlebars-template">
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
     {{#each []}}
      <tr>
        <td>{{ this.name }}</td>
        <td>{{ this.email }}</td>
      </tr>
     {{/each}}
  </tbody>
</table>
</script>
 
 
<script type="text/javascript">

var Person = Backbone.Model.extend({
    defaults: {
        name: 'Dave Smith',
        email: 'dave@bb.com'
    }
});
 
var doe = new Person({ id: 1, name: 'John Doe', email: 'johndoe@bb.com' });
var hancock = new Person({ id: 2, name: 'John Hancock', email: 'johnhancock@bb.com' });
var jefferson = new Person({ id: 3, name: 'Thomas Jefferson', email: 'thomasjefferson@bb.com'});


var Persons = Backbone.Collection.extend({
    model: Person
});
 
var personArray = [doe, hancock, jefferson];
var persons = new Persons(personArray);  

var PersonsListView = Backbone.View.extend({
    el: '.content',
    initialize:function(){
        this.render();
    },
    render: function () {
        var source = $('#person-list-template').html();
        var template = Handlebars.compile(source);
        var html = template(persons.toJSON());
        this.$el.html(html);
    }
});
var personslistview = new PersonsListView();
</script>
</body>
</html>

This entry was posted on Wednesday, September 3rd, 2014 at 9:04 pm and is filed under Javascript MVC Frameworks. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply