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
SA Night #2 FinatextのSA思想/SA Night #2 Finatext session
satoshiimai
1
100
20250208_OpenAIDeepResearchがやばいという話
doradora09
PRO
0
170
Ask! NIKKEI RAG検索技術の深層
hotchpotch
13
2.8k
7日間でハッキングをはじめる本をはじめてみませんか?_ITエンジニア本大賞2025
nomizone
2
1.4k
家電アプリ共通PF "Linova" のAPI利用とPostman活用事例ご紹介
yukiogawa
0
130
「海外登壇」という 選択肢を与えるために 〜Gophers EX
logica0419
0
500
モノレポ開発のエラー、誰が見る?Datadog で実現する適切なトリアージとエスカレーション
biwashi
6
770
第13回 Data-Centric AI勉強会, 画像認識におけるData-centric AI
ksaito_osx
0
360
Moved to https://speakerdeck.com/toshihue/presales-engineer-career-bridging-tech-biz-ja
toshihue
2
550
日経電子版 x AIエージェントの可能性とAgentic RAGによって提案書生成を行う技術
masahiro_nishimi
1
290
WAF に頼りすぎない AWS WAF 運用術 meguro sec #1
izzii
0
460
ビジネスと現場活動をつなぐソフトウェアエンジニアリング~とあるスタートアッププロダクトの成長記録より~
mizunori
0
210
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Agile that works and the tools we love
rasmusluckow
328
21k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
950
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
Raft: Consensus for Rubyists
vanstee
137
6.8k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Become a Pro
speakerdeck
PRO
26
5.1k
Facilitating Awesome Meetings
lara
51
6.2k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
400
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
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>