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
170
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
データ資産をシームレスに伝達するためのイベント駆動型アーキテクチャ
kakehashi
PRO
2
230
『衛星データ利用の方々にとって近いようで触れる機会のなさそうな小話 ~ 衛星搭載ソフトウェアと衛星運用ソフトウェア (実物) を動かしながらわいわいする編 ~』 @日本衛星データコミニティ勉強会
meltingrabbit
0
120
Postmanを使いこなす!2025年ぜひとも押さえておきたいPostmanの10の機能
nagix
2
120
Classmethod AI Talks(CATs) #15 司会進行スライド(2025.02.06) / classmethod-ai-talks-aka-cats_moderator-slides_vol15_2025-02-06
shinyaa31
0
170
Datadog APM におけるトレース収集の流れ及び Retention Filters のはなし / datadog-apm-trace-retention-filters
k6s4i53rx
0
320
現場で役立つAPIデザイン
nagix
29
10k
リアルタイム分析データベースで実現する SQLベースのオブザーバビリティ
mikimatsumoto
0
950
技術負債の「予兆検知」と「状況異変」のススメ / Technology Dept
i35_267
1
1k
Bounded Context: Problem or Solution?
ewolff
1
210
Ask! NIKKEI RAG検索技術の深層
hotchpotch
13
2.8k
データの品質が低いと何が困るのか
kzykmyzw
6
1k
関東Kaggler会LT: 人狼コンペとLLM量子化について
nejumi
3
460
Featured
See All Featured
Designing for Performance
lara
604
68k
Building Your Own Lightsaber
phodgson
104
6.2k
Rails Girls Zürich Keynote
gr2m
94
13k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Adopting Sorbet at Scale
ufuk
74
9.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Bash Introduction
62gerente
610
210k
Automating Front-end Workflow
addyosmani
1367
200k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
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>