Created
April 3, 2012 02:05
-
-
Save dillonkearns/2288774 to your computer and use it in GitHub Desktop.
Demo of Backbone.js and Coffeescript
This file contains 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
| class DriversLicenseModel extends Backbone.Model | |
| class DriversLicenseView extends Backbone.View | |
| initialize: -> | |
| @model.on('change', @somethingChanged, @) | |
| somethingChanged: (something) -> | |
| @render() | |
| template: _.template("<h1><%= name %></h1><ul><li><%= dob %></li><li><%= num %></li></ul>") | |
| render: -> | |
| attributes = @model.toJSON() | |
| $(@el).html(@template(attributes))# $(this.el) == this.$el | |
| @ | |
| driversLicenseModel = new DriversLicenseModel | |
| name: "Dillon Kearns" | |
| dob: "9/11/86" | |
| num: "D47712312" | |
| driversLicenseView = new DriversLicenseView( | |
| model: driversLicenseModel | |
| ) | |
| $ -> | |
| driversLicenseView.render() | |
| $('#app').html driversLicenseView.el | |
| alert "Hey, bro... liking that coffee?" | |
This file contains 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 DriversLicenseModel = Backbone.Model.extend({}); | |
| var DriversLicenseView = Backbone.View.extend({ | |
| initialize: function() { | |
| this.model.on('change', this.somethingChanged, this); | |
| }, | |
| somethingChanged: function(something) { | |
| this.render(); | |
| }, | |
| template: _.template("<h1><%= name %></h1><ul><li><%= dob %></li><li><%= num %></li></ul>"), | |
| render: function() { | |
| var attributes = this.model.toJSON(); | |
| $(this.el).html(this.template(attributes)); // $(this.el) == this.$el | |
| return this; | |
| } | |
| }); | |
| var driversLicenseModel = new DriversLicenseModel({ | |
| name: "Dillon Kearns", | |
| dob: "9/11/86", | |
| num: "D47712312" | |
| }); | |
| var driversLicenseView = new DriversLicenseView({ | |
| model: driversLicenseModel | |
| }); | |
| $(function() { | |
| driversLicenseView.render(); | |
| $('#app').html(driversLicenseView.el); | |
| }); |
This file contains 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
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" | |
| "http://www.w3.org/TR/html4/loose.dtd"> | |
| <html> | |
| <head> | |
| <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.2.min.js'></script> | |
| <script type='text/javascript' src='http://documentcloud.github.com/underscore/underscore-min.js'></script> | |
| <script type='text/javascript' src='http://documentcloud.github.com/backbone/backbone-min.js'></script> | |
| <script type='text/javascript' src='../javascripts/backbone-demo.js'></script> | |
| <title></title> | |
| </head> | |
| <body id='app'> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment