ERDDUG - Backbone.js

Demo of Backbone.js at ERDDUG on 17 March 2012

Transcript

1. ERDDUG - 17 March 2012 Kevin McKelvin Sunday 18 March 12
2. Speaker.bio Kevin McKelvin @kmckelvin www.mcdev.za.net Sunday 18 March 12
3. JavaScript (for n00bz!) “JavaScript is the one language people feel they can use, without having to learn it first.” Sunday 18 March 12
4. setName = function(name) { this.name = name } obj = { setObjName: setName } obj.setObjName(“John”); setName.call(obj, “John”); setName.apply(obj, [“John”]); this? Sunday 18 March 12
5. Constructors Album = function(name) { this.name = name; this.showName = function() { console.log(this.name) }; } abbey_road = new Album(‘Abbey Road’); abbey_road.showName(); # Logs “Abbey Road” Sunday 18 March 12
6. Prototypes Album.prototype.showName = function() { console.log(this.name); } Album = function(name) { this.name = name; } abbey_road.showName(); # Logs “Abbey Road” abbey_road = new Album(‘Abbey Road’); Sunday 18 March 12
7. Prototypical Inheritance AudioAlbum = function(name) { this.name = name; } AudioAlbum.prototype = Album audio = new AudioAlbum(“Deep Purple”); audio.showName(); # Logs “Deep Purple” Sunday 18 March 12
8. Sunday 18 March 12
9. What is Backbone.js? Sunday 18 March 12
10. JAVASCRIPT ”MVC” Sunday 18 March 12
11. Models Album = Backbone.Model.extend({ ... }) Sunday 18 March 12
12. collections AlbumCollection = Backbone.Collection.extend({ model: Album, url: ‘/albums’ }); Sunday 18 March 12
13. views AlbumView = Backbone.View.extend({ tagName: ‘li’, initialize: function() { this.template = ... }, render: function() { ... } }) Sunday 18 March 12
14. templates <script id="user" type="text/html"> <li> <p class="name">Hello I'm {{ name }}</p> <p> <a href="http://twitter.com/ {{ twitter }}">@{{ twitter }} </a> </p> </li> </script> Sunday 18 March 12
15. ROUTER var Workspace = Backbone.Router.extend({ routes: { "help": "help", // #help "search/:query": "search", // #search/kiwis "search/:query/p:page": "search" // #search/kiwis/p7 }, help: function() { ... }, search: function(query, page) { ... } }); Sunday 18 March 12
16. DEMO :) Sunday 18 March 12
17. resources backbonejs.org underscorejs.org peepcode.com Sunday 18 March 12