public
Created

render backbone views with jquery templates

  • Download Gist
1-layout.html
HTML
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
<html>
<head>
<script src="jquery-1.6.1.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script src="underscore-min.js"></script>
<script src="backbone-min.js"></script>
<script src="example.js"></script>
 
<style type="text/css">
fieldset {
width: 500px;
}
#user-edit ul {
list-style-type: none;
}
</style>
 
<script id="user-list-template" type="text/x-jquery-tmpl">
<li>
${firstname}
${lastname}
</li>
</script>
</head>
<body>
 
<div id="user-list">
<fieldset>
<legend>Users</legend>
<ul></uL>
</fieldset>
</div>
 
</body>
</html>
2-userlist.js
JavaScript
1 2 3 4 5 6
var user1 = new User()
user1.set({firstname: "Derick", lastname: "Bailey", id: 0});
var user2 = new User()
user2.set({firstname: "JoAnn", lastname: "Tsang", id: 1});
 
var users = new UserList([user1, user2]);
3-view.js
JavaScript
1 2 3 4 5 6 7 8 9
var UserListView = Backbone.View.extend({
el: $("#user-list ul"),
 
render: function(){
var template = $("#user-list-template");
var html = template.tmpl(this.model.toJSON());
this.el.html(html);
}
});
4-initial-render.js
JavaScript
1 2
var userListView = new UserListView({model: users});
userListView.render();
5-extract-template.js
JavaScript
1 2 3 4 5 6 7 8 9
var UserListView = Backbone.View.extend({
el: $("#user-list ul"),
template: $("#user-list-template"),
 
render: function(){
var html = this.template.tmpl(this.model.toJSON());
this.el.html(html);
}
});
6-templated-view.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11
var TemplatedView = Backbone.View.extend({
render: function(){
var html = this.template.tmpl(this.model.toJSON());
this.el.html(html);
}
});
 
var UserListView = TemplatedView.extend({
el: $("#user-list ul"),
template: $("#user-list-template"),
});
7-subclass-override.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11
var UserEditView = TemplatedView.extend({
el: $("#user-edit"),
template: $("#user-edit-template"),
 
render: function(){
TemplatedView.prototype.render.call(this);
 
this.save = $("#save");
this.cancel = $("#cancel");
}
});
8-example.html
HTML
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
<html>
<head>
<script src="jquery-1.6.1.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script src="underscore-min.js"></script>
<script src="backbone-min.js"></script>
<script src="example.js"></script>
 
<style type="text/css">
fieldset {
width: 500px;
}
#user-edit ul {
list-style-type: none;
}
</style>
 
<script id="user-list-template" type="text/x-jquery-tmpl">
<li>
${firstname}
${lastname}
</li>
</script>
 
<script id="user-edit-template" type="text/x-jquery-tmpl">
<fieldset>
<legend>User Details</legend>
<label for="firstname">First Name: </label><input type="text" id="firstname" value="${firstname}"><br/>
<label for="lastname">Last Name: </label><input type="text" id="lastname" value="${lastname}"><br/>
<button id="save">Save</button>
<button id="cancel">Cancel</button>
</fieldset>
</script>
</head>
<body>
 
<div id="user-edit"></div>
 
<div id="user-list">
<fieldset>
<legend>Users</legend>
<ul></uL>
</fieldset>
</div>
 
</body>
</html>
9-example.js
JavaScript
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
$(function(){
 
var TemplatedView = Backbone.View.extend({
render: function(){
var html = this.template.tmpl(this.model.toJSON());
this.el.html(html);
}
});
 
var UserListView = TemplatedView.extend({
el: $("#user-list ul"),
template: $("#user-list-template"),
});
 
var UserEditView = TemplatedView.extend({
el: $("#user-edit"),
template: $("#user-edit-template"),
 
render: function(){
TemplatedView.prototype.render.call(this);
 
this.save = $("#save");
this.cancel = $("#cancel");
}
});
var User = Backbone.Model.extend({
});
 
var UserList = Backbone.Collection.extend({
model: User
});
 
var user1 = new User()
user1.set({firstname: "Derick", lastname: "Bailey", id: 0});
var user2 = new User()
user2.set({firstname: "JoAnn", lastname: "Tsang", id: 1});
 
var users = new UserList([user1, user2]);
var userListView = new UserListView({model: users});
userListView.render();
 
var userEditView = new UserEditView({model: user1});
userEditView.render();
});

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.