Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Backbone.js Intro
Search
Max Lynch
June 19, 2012
Technology
3
180
Backbone.js Intro
A presentation given at MadJS (
http://madjs.com/
) in February 2012
Max Lynch
June 19, 2012
Tweet
Share
Other Decks in Technology
See All in Technology
VGGT: Visual Geometry Grounded Transformer
peisuke
1
550
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
220
AIの全社活用を推進するための安全なレールを敷いた話
shoheimitani
2
610
マルチプロダクト環境におけるSREの役割 / SRE NEXT 2025 lunch session
sugamasao
1
220
LLM時代の検索
shibuiwilliam
2
620
SREの次のキャリアの道しるべ 〜SREがマネジメントレイヤーに挑戦して、 気づいたこととTips〜
coconala_engineer
1
590
SRE不在の開発チームが障害対応と 向き合った100日間 / 100 days dealing with issues without SREs
shin1988
1
1.1k
伴走から自律へ: 形式知へと導くSREイネーブリングによる プロダクトチームの信頼性オーナーシップ向上 / SRE NEXT 2025
visional_engineering_and_design
2
180
大量配信システムにおけるSLOの実践:「見えない」信頼性をSLOで可視化
plaidtech
PRO
0
260
20250708オープンエンドな探索と知識発見
sakana_ai
PRO
3
550
ゼロからはじめる採用広報
yutadayo
3
1k
DatabricksにOLTPデータベース『Lakebase』がやってきた!
inoutk
0
150
Featured
See All Featured
It's Worth the Effort
3n
185
28k
Typedesign – Prime Four
hannesfritz
42
2.7k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
KATA
mclloyd
30
14k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Invisible Side of Design
smashingmag
301
51k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Embracing the Ebb and Flow
colly
86
4.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Transcript
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>