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
クラウド開発の舞台裏とSRE文化の醸成 / SRE NEXT 2025 Lunch Session
kazeburo
1
360
いつの間にか入れ替わってる!?新しいAWS Security Hubとは?
cmusudakeisuke
0
150
オフィスビルを監視しよう:フィジカル×デジタルにまたがるSLI/SLO設計と運用の難しさ / Monitoring Office Buildings: The Challenge of Physical-Digital SLI/SLO Design & Operation
bitkey
1
220
United™️ Airlines®️ Customer®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedguide
0
600
「Chatwork」のEKS環境を支えるhelmfileを使用したマニフェスト管理術
hanayo04
1
140
AWS CDK 入門ガイド これだけは知っておきたいヒント集
anank
3
390
VGGT: Visual Geometry Grounded Transformer
peisuke
1
400
AWS CDK 開発を成功に導くトラブルシューティングガイド
wandora58
3
140
Enhancing SaaS Product Reliability and Release Velocity through Optimized Testing Approach
ropqa
1
250
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
270
Lufthansa ®️ USA Contact Numbers: Complete 2025 Support Guide
lufthanahelpsupport
0
220
事例で学ぶ!B2B SaaSにおけるSREの実践例/SRE for B2B SaaS: A Real-World Case Study
bitkey
1
250
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1031
460k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Why Our Code Smells
bkeepers
PRO
336
57k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
How GitHub (no longer) Works
holman
314
140k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Done Done
chrislema
184
16k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Raft: Consensus for Rubyists
vanstee
140
7k
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>