Created
June 21, 2011 03:06
-
-
Save mxriverlynn/1037163 to your computer and use it in GitHub Desktop.
render backbone views with jquery templates
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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]); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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); | |
| } | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var userListView = new UserListView({model: users}); | |
| userListView.render(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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); | |
| } | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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"), | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var UserEditView = TemplatedView.extend({ | |
| el: $("#user-edit"), | |
| template: $("#user-edit-template"), | |
| render: function(){ | |
| TemplatedView.prototype.render.call(this); | |
| this.save = $("#save"); | |
| this.cancel = $("#cancel"); | |
| } | |
| }); | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(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