Backbone.js Intro

Backbone.js Max Lynch h*p://documentcloud.github.com/backbone/

Why Backbone.js •  Structure •  Cut down on
AJAX “boilerplate” •  Backbone.View (chunk of UI) •  Backbone.Router (client side URL rouBng)

MVC Framework •  Models (your data) •  Views
(chunks of UI) •  Controller (vague; events originaBng from UI)

Core Features •  Backbone.Model (your data) •  Backbone.Collection
(groups of models) •  Backbone.View (chunk of UI) •  Backbone.Router (client side URL rouBng)

Backbone.Model var UserApp = Backbone.Model.extend({ urlRoot: '/api/v1/user/app'
}); Creating: var app = new UserApp(); app.set({‘name’: ‘MadJS’}); app.save(); # POST /api/v1/user/app Loading: var app = new UserApp(); app.id = 54; app.fetch(); # GET /api/v1/user/app/54 Updating: app.set({‘name’: ‘Madison Javascript’}); app.save(); # PUT /api/v1/user/app/54 Deleting: app.destroy(); # DELETE /api/v1/user/app/54

Model JSON {
"name": "MadJS", "created_at": 1329102759, "tree": "..." }

Backbone.Collections var UserApps = Backbone.Collection.extend({ model: UserApp,
url: '/api/v1/user/apps', parse: function(response) { return response.apps; } }); REST API JSON Response: { "apps": [ { "name": "MadJS", "id": 54, "created_at": 1329102759, "tree": "..." } ] } Loading: var app = new UserApps(); app.fetch(); # GET /api/v1/user/apps

Backbone.View var AppView = Backbone.View.extend({ template: _.template($('#app-‐template').html()),
initialize: function() { }, render: function() { $(this.el).html(this.template(this.model.toJSON())); } }); var Dash = Backbone.View.extend({ initialize: function() { //UserApps.bind('add', this.addApp, this); var self = this; var apps = new UserApps(); apps.bind('reset', this.renderApps); apps.fetch(); }, renderApps: function(apps) { apps.each(function(app) { var appView = new AppView({ model: app }); appView.render(); $('#apps').append(appView.el); }); } });

Wrapping it Up <!DOCTYPE html> <html>
<head> <title>Example Dashboard</title> </head> <body> <h1>Your Apps</h1> <ul id="apps"></ul> <script type="text/template" id="app-‐template"> <li> <h4><a href="#"><%= name %></h2></li> </li> </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/ jquery.min.js"></script> <script src="/static/js/ext/underscore.js"></script> <script src="/static/js/ext/backbone.js"></script> <script src="/static/js/app/models.js"></script> <script src="/static/js/dashboard/test.js"></script> </body> </html>

Backbone.js Intro

Backbone.js Intro

Max Lynch

Other Decks in Technology

Featured

Transcript

Backbone.js Max Lynch h*p://documentcloud.github.com/backbone/

Why Backbone.js •  Structure •  Cut down on

MVC Framework •  Models (your data) •  Views

Core Features •  Backbone.Model (your data) •  Backbone.Collection

Backbone.Model var UserApp = Backbone.Model.extend({ urlRoot: '/api/v1/user/app'

Model JSON {

Backbone.Collections var UserApps = Backbone.Collection.extend({ model: UserApp,

Backbone.View var AppView = Backbone.View.extend({ template: _.template($('#app-‐template').html()),

Wrapping it Up <!DOCTYPE html> <html>