Skip to content

@derickbailey /1-layout.html
Created

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
render backbone views with jquery templates
<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>
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 = 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);
}
});
var userListView = new UserListView({model: users});
userListView.render();
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);
}
});
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");
}
});
<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>
$(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();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.