SlideShare a Scribd company logo
前端MVC 
之Backbone 
miyukizhang
提纲 
• Why 
• What 
• 案例 
• Questions
提纲 
• Why 
• What 
• 案例 
• Questions
Why 
• JS开发现状: 
1. 数据和视图耦合过紧 
var list = “”; 
$.each (data, function(index. value){ 
list += “<li id=‘item-­‐‑” + value.Id + “’>” + value.Name + “</li>”; 
}); 
$(“ul”).append(list);
Why 
2. 回调过多 
$.getJSON(“/Items”, function(data){ 
var list = “”; 
$.each(data, function(index, value){ 
list += “<li id=‘item-­‐‑” + value.Id + “’>” + value.Name + “</li>”; 
}); 
$(“ul”).append(list); 
$(“li”).click(function(){ 
var $this = $(this); 
var id = $this.aUr(“id”).replace(“items-­‐‑”, “”); 
$.post(“/Items”, {id: id}, function(){ 
$this.fadeOut(function(){ 
$this.remove(); 
}); 
}); 
}); 
});
Why 
• 遇到的问题: 
o 程序结构不清晰,不利于理解 
o 大量的字符串拼接 
o 大量的回调函数 
o 难以维护
Why 
• 现代Web App的特点: 
o 页面不整体刷新 
o 与服务器的交互均由Ajax完成 
o 服务器只负责提供数据接口 
o 逻辑、展现、行为都交给JavaScript处理 
o 速度更快、体验更好
Why 
• 遇到的问题: 
o JS开发量大、逻辑复杂 
o 如果整个App只有一个URL,不便于收藏和传播 
o 无浏览器历史记录,浏览器前进后退按钮失效 
o 对搜索引擎不友好
Why 
• So,我们需要一个解决方案: 
o 使程序结构清晰、便于理解 
o 将数据与UI解耦 
o 不存在回调函数 
o 减少重复劳动 
o 易于维护和扩展
Why 
• So,我们需要一个解决方案(更实际地): 
o 基于数据层的RESTful Web服务 
o 事件(数据与UI解耦) 
o 一个牢固的路由系统 
o 一个模板引擎 
o 一个可以解决上面所有需求轻量JavaScript框架
Why 
今天的话题:
提纲 
• Why 
• What 
• 案例 
• Questions
What 
Backbone.js gives structure to web 
applications by providing models with key-value 
binding and custom 
events, collections with a rich API of 
enumerable functions, views with declarative 
event handling, and connects it all to your 
existing API over a RESTful JSON interface.
What 
Backbone.js gives structure to web 
applications by providing models with key-value 
binding and custom 
events, collections with a rich API of 
enumerable functions, views with declarative 
event handling, and connects it all to your 
existing API over a RESTful JSON interface.
What 
Backbone.js gives structure to web 
applications by providing models with key-value 
binding and custom 
events, collections with a rich API of 
enumerable functions, views with declarative 
event handling, and connects it all to your 
existing API over a RESTful JSON interface.
What 
Backbone.js gives structure to web 
applications by providing models with key-value 
binding and custom 
events, collections with a rich API of 
enumerable functions, views with declarative 
event handling, and connects it all to your 
existing API over a RESTful JSON interface.
What 
Backbone.js gives structure to web 
applications by providing models with key-value 
binding and custom 
events, collections with a rich API of 
enumerable functions, views with declarative 
event handling, and connects it all to your 
existing API over a RESTful JSON interface.
What 
• 依赖: 
o Underscore.js 
o jQuery 或者 Zepto 
o Json2.js
What 
MVC
What 
MVC 
Model / Collection 数据(模型)
What 
MVC 
Model / Collection 数据(模型) 
Template 展现层(视图)
What 
MVC 
Model / Collection 数据(模型) 
Template 展现层(视图) 
View 控制器
What 
MVC 
Model / Collection 数据(模型) 
Template 展现层(视图) 
View 控制器 
Router ???
What 
MVC 
Model / Collection 数据(模型) 
Template 展现层(视图) 
View 控制器 
Router ??? 
Controller
What 
• 模型(Model) 
o 用来存放应用的所有数据对象 
o 能够被创建、验证和销毁等 
o 属性的改变会触发“change”事件
What 
模型 
• Fetch HTTP GET /url 
• Save(new) HTTP POST /url 
• Save HTTP PUT /url/id 
• Destroy HTTP DELETE /url/id
What 
var Comment = Backbone.Model.extend(); 
var comment = new Comment({ 
id: 6378, 
text: “高富帅的设计”, 
created_at: “3小时前”, 
user: { 
id: ”sasaliu”, 
user_name_zh: “刘沙” 
} 
});
• extend 
• constructor/initialize 
• get 
• set 
• escape 
• has 
• unset 
• clear 
• id 
• cid 
• attributes 
• defaults 
• toJSON 
comment.get(‘text’ 
); //高富帅的设计 
comment.set( 
{‘text’:”<script>console.log(‘xss’)</script>”}, 
{silent: true} 
); 
comment.escape(‘text’);// 
&lt;script&gt;console.log(&#x27xss&#x27)&lt;&#x2F; 
script&gt; 
comment.has(‘city’ 
);//false 
comment.unset(‘text’); 
//触发’change’事件 
var Comment = new Backbone.Model.extend({ 
//hash or function() 
defaults: { 
‘root’: ‘tea.cdc.com’ 
}, 
initialize: function(){…} 
}); 
var comment = new Comment(); 
comment.get(‘root’); 
//’tea.cdc.com’
• fetch 
• save 
• desrtoy 
• validate 
• url 
• urlRoot 
• parse 
• clone 
• isNew 
• change 
• hasChanged 
• changedAttributes 
• previous 
• previousAttributes 
var Comment = new Backbone.Model.extend({ 
urlRoot: ‘/comments’, 
initialize: function(aUrs){ … } 
}); 
var comment = new Comment({id: 123456}); 
comment.url(); 
// ‘/comments/123456’ 
comment.fetch(); 
var Comment = new Backbone.Model.extend({ 
initialize: function(aUrs){ … }, 
validate: function(aUrs){ 
if(aUrs.text.length < 1){ 
return ‘回复不能为空’; 
} 
} 
}); 
var comment = new Comment(); 
comment.set({text: ‘’},{ 
error: function(model, error){ 
alert(error); 
} 
});
What 
• 集合(Collection) 
o 模型的有序组合 
o Add,Remove,Fetch,Reset,Create,Sort
What 
var Comments = new Backbone.Collection.extend({ 
model: Comment, 
initialize: function(models, options){ 
} 
});
What 
[ 
{ 
id: 6378, 
text: “高富帅的设计”, 
created_at: “3小时前”, 
user: { 
id: ”sasaliu”, 
user_name_zh: “刘沙”, 
user_name_en: "ʺsasaliu"ʺ, 
small_avatar: "ʺ/data/photo/sp__201203291751346381.jpg"ʺ 
... 
} 
}, 
{...} 
{...} 
]
What 
• extend 
• model 
• constructor/initialize 
• models 
• toJSON 
• Underscore Methods(25) 
• get 
• getByCid 
• at 
• length 
• comparator 
• sort 
• pluck 
• url 
• parse 
Comments = Backbone.Collection.extend({ 
model: Comment, 
initialize: function(models, options){ 
this.url = “/comments”; 
}, 
comparator: function(model){ 
return model.get(“id”); 
} 
});
Add,Remove,Fetch,Reset,Create,Sort 
collection.create(aUributes, [options]) 
var Comments = new Comments([{…}]); 
Comments.create({text:”高富帅的设计”}); 
var comment = new Comment({ 
text: “高富帅的设计” 
}); 
comment.save(); 
Comments.add(comment);
What 
• 视图(View) 
o 一个逻辑的UI组件 
o 委托DOM事件 
o 负责实例化集合
What 
Comment 
Comments
前端MVC之BackboneJS
App.Views.Comment = Backbone.View.extend({ 
className: 'ʹ comment-­‐‑item'ʹ, 
template: $('ʹ#comment-­‐‑item-­‐‑template'ʹ).html(), 
events: { 
"ʺmouseenter"ʺ: "ʺshowActions"ʺ, 
"ʺmouseleave"ʺ: "ʺhideActions"ʺ 
}, 
initialize: function(){ 
_.bindAll(this,'ʹrender'ʹ); 
this.model.bind('ʹchange'ʹ, this.render); 
}, 
render: function(){ 
$(this.el).html(_.template( this.template,this.model.toJSON())); 
$(this.el).aUr({ 
'ʹdata-­‐‑comment-­‐‑id'ʹ: this.model.id 
}); 
return this; 
}, 
showActions: function(e){ 
this.$('ʹ.reply'ʹ).show(); 
}, 
hideActions: function(e){ 
this.$('ʹ.reply'ʹ).hide(); 
} 
});
var view = new App.Views.Comment({ 
model: model 
}); 
$('ʹbody'ʹ).append(view.render().el);
What 
• 路由(Backbone.Router) 
o 将应用程序的状态和URL的哈希片段关联在一起 
o 根据路由规则,连接到指定的动作和事件
App.Router.page = Backbone.Router.extend({ 
routes: { 
“”: 
“index”, 
“help”: 
“help”, 
// #help 
“search/:query”:”search”, 
// #search/miyukizhang 
}, 
initialize: function(){ 
Backbone.history.start(); 
}, 
index: function(){ /* … */}, 
help: function(){ 
// … 
}, 
search: function(query){ 
// … 
} 
});
Router Data 
Source 
Model/Collection 
Template 
View
• 其他 
What Backbone.js 
o Backbone.history 
o Backbone.sync 
o Utility Function
提纲 
• Why 
• What 
• 案例 
• Questions
前端MVC之BackboneJS
提纲 
• Why 
• What 
• 案例 
• Questions
Questions 
提问环节

More Related Content

PDF
Client-side MVC with Backbone.js
PPTX
Javascript first-class citizenery
PPT
Jquery ui
PPTX
jQuery Foot-Gun Features
PDF
jQuery for beginners
PDF
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점
PDF
Bootstrap과 UI-Bootstrap
PPTX
jQuery
Client-side MVC with Backbone.js
Javascript first-class citizenery
Jquery ui
jQuery Foot-Gun Features
jQuery for beginners
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점
Bootstrap과 UI-Bootstrap
jQuery

What's hot (20)

KEY
[Coscup 2012] JavascriptMVC
KEY
【前端Mvc】之豆瓣说实践
PPT
JQuery introduction
PDF
jQuery Loves Developers - Oredev 2009
PDF
前端MVC 豆瓣说
PDF
Write Less Do More
PDF
JavaScript for Flex Devs
PPT
A Short Introduction To jQuery
PPTX
SharePoint and jQuery Essentials
PDF
Learning jQuery made exciting in an interactive session by one of our team me...
ODP
Introduction to jQuery
PDF
jQuery Essentials
PDF
WebApps e Frameworks Javascript
PPTX
jQuery Presentation
PDF
Learning jQuery in 30 minutes
PPTX
JavaScript and jQuery Basics
PPTX
KEY
An in-depth look at jQuery UI
PPTX
jQuery
PPTX
jQuery from the very beginning
[Coscup 2012] JavascriptMVC
【前端Mvc】之豆瓣说实践
JQuery introduction
jQuery Loves Developers - Oredev 2009
前端MVC 豆瓣说
Write Less Do More
JavaScript for Flex Devs
A Short Introduction To jQuery
SharePoint and jQuery Essentials
Learning jQuery made exciting in an interactive session by one of our team me...
Introduction to jQuery
jQuery Essentials
WebApps e Frameworks Javascript
jQuery Presentation
Learning jQuery in 30 minutes
JavaScript and jQuery Basics
An in-depth look at jQuery UI
jQuery
jQuery from the very beginning
Ad

Viewers also liked (20)

PDF
Электронный киоск
PDF
Tech school indonesia
PDF
Презентация Mobile-info
PDF
Asmo-Press
PPTX
Immigrant Citizens Survey: Key Findings by Thomas Huddleston
PDF
Taller de computación básica
PPTX
Sinthia
PPTX
Presentasjon1om barnehage2
DOC
Respiration, etc
PPTX
Caja tema
PPTX
Caja tema
PPTX
New microsoft office power point presentation
PPTX
Presentasjon1om barnehage2
PDF
移动端Web app开发
PPT
给初学者的Html5教程
DOCX
2 do grado
PPTX
The Engagement Effect Dig South
PPTX
PDF
Презентация Mobile-Asmo
PPT
How are you protecting your general anesthesia procedure patients from contam...
Электронный киоск
Tech school indonesia
Презентация Mobile-info
Asmo-Press
Immigrant Citizens Survey: Key Findings by Thomas Huddleston
Taller de computación básica
Sinthia
Presentasjon1om barnehage2
Respiration, etc
Caja tema
Caja tema
New microsoft office power point presentation
Presentasjon1om barnehage2
移动端Web app开发
给初学者的Html5教程
2 do grado
The Engagement Effect Dig South
Презентация Mobile-Asmo
How are you protecting your general anesthesia procedure patients from contam...
Ad

Similar to 前端MVC之BackboneJS (20)

PDF
Understanding backbonejs
PPT
Backbone.js
KEY
Backbone.js Simple Tutorial
PPTX
Backbonejs for beginners
PDF
Backbone.js
PDF
Javascript Application Architecture with Backbone.JS
PPTX
Backbone.js
PPT
Backbone js
PDF
A Little Backbone For Your App
PDF
Backbone.js: Run your Application Inside The Browser
PDF
Backbone js
PDF
Client-side MVC with Backbone.js (reloaded)
PDF
Backbone Basics with Examples
PPTX
Backbone
PDF
An intro to Backbone.js
PDF
Backbone
PDF
Viking academy backbone.js
PDF
Backbone.js — Introduction to client-side JavaScript MVC
PDF
Aplicacoes dinamicas Rails com Backbone
PDF
Backbone.js
Understanding backbonejs
Backbone.js
Backbone.js Simple Tutorial
Backbonejs for beginners
Backbone.js
Javascript Application Architecture with Backbone.JS
Backbone.js
Backbone js
A Little Backbone For Your App
Backbone.js: Run your Application Inside The Browser
Backbone js
Client-side MVC with Backbone.js (reloaded)
Backbone Basics with Examples
Backbone
An intro to Backbone.js
Backbone
Viking academy backbone.js
Backbone.js — Introduction to client-side JavaScript MVC
Aplicacoes dinamicas Rails com Backbone
Backbone.js

Recently uploaded (20)

PDF
Getting Started with Data Integration: FME Form 101
PDF
MIND Revenue Release Quarter 2 2025 Press Release
PPTX
Big Data Technologies - Introduction.pptx
PDF
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
PDF
Spectral efficient network and resource selection model in 5G networks
PPTX
Group 1 Presentation -Planning and Decision Making .pptx
PDF
Assigned Numbers - 2025 - Bluetooth® Document
PDF
Agricultural_Statistics_at_a_Glance_2022_0.pdf
PPTX
1. Introduction to Computer Programming.pptx
PDF
Encapsulation_ Review paper, used for researhc scholars
PPTX
Programs and apps: productivity, graphics, security and other tools
PDF
A comparative analysis of optical character recognition models for extracting...
PPTX
20250228 LYD VKU AI Blended-Learning.pptx
PPTX
Spectroscopy.pptx food analysis technology
PDF
Dropbox Q2 2025 Financial Results & Investor Presentation
PPTX
Tartificialntelligence_presentation.pptx
PPTX
Digital-Transformation-Roadmap-for-Companies.pptx
PDF
Reach Out and Touch Someone: Haptics and Empathic Computing
PPT
Teaching material agriculture food technology
PDF
Building Integrated photovoltaic BIPV_UPV.pdf
Getting Started with Data Integration: FME Form 101
MIND Revenue Release Quarter 2 2025 Press Release
Big Data Technologies - Introduction.pptx
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
Spectral efficient network and resource selection model in 5G networks
Group 1 Presentation -Planning and Decision Making .pptx
Assigned Numbers - 2025 - Bluetooth® Document
Agricultural_Statistics_at_a_Glance_2022_0.pdf
1. Introduction to Computer Programming.pptx
Encapsulation_ Review paper, used for researhc scholars
Programs and apps: productivity, graphics, security and other tools
A comparative analysis of optical character recognition models for extracting...
20250228 LYD VKU AI Blended-Learning.pptx
Spectroscopy.pptx food analysis technology
Dropbox Q2 2025 Financial Results & Investor Presentation
Tartificialntelligence_presentation.pptx
Digital-Transformation-Roadmap-for-Companies.pptx
Reach Out and Touch Someone: Haptics and Empathic Computing
Teaching material agriculture food technology
Building Integrated photovoltaic BIPV_UPV.pdf

前端MVC之BackboneJS

  • 2. 提纲 • Why • What • 案例 • Questions
  • 3. 提纲 • Why • What • 案例 • Questions
  • 4. Why • JS开发现状: 1. 数据和视图耦合过紧 var list = “”; $.each (data, function(index. value){ list += “<li id=‘item-­‐‑” + value.Id + “’>” + value.Name + “</li>”; }); $(“ul”).append(list);
  • 5. Why 2. 回调过多 $.getJSON(“/Items”, function(data){ var list = “”; $.each(data, function(index, value){ list += “<li id=‘item-­‐‑” + value.Id + “’>” + value.Name + “</li>”; }); $(“ul”).append(list); $(“li”).click(function(){ var $this = $(this); var id = $this.aUr(“id”).replace(“items-­‐‑”, “”); $.post(“/Items”, {id: id}, function(){ $this.fadeOut(function(){ $this.remove(); }); }); }); });
  • 6. Why • 遇到的问题: o 程序结构不清晰,不利于理解 o 大量的字符串拼接 o 大量的回调函数 o 难以维护
  • 7. Why • 现代Web App的特点: o 页面不整体刷新 o 与服务器的交互均由Ajax完成 o 服务器只负责提供数据接口 o 逻辑、展现、行为都交给JavaScript处理 o 速度更快、体验更好
  • 8. Why • 遇到的问题: o JS开发量大、逻辑复杂 o 如果整个App只有一个URL,不便于收藏和传播 o 无浏览器历史记录,浏览器前进后退按钮失效 o 对搜索引擎不友好
  • 9. Why • So,我们需要一个解决方案: o 使程序结构清晰、便于理解 o 将数据与UI解耦 o 不存在回调函数 o 减少重复劳动 o 易于维护和扩展
  • 10. Why • So,我们需要一个解决方案(更实际地): o 基于数据层的RESTful Web服务 o 事件(数据与UI解耦) o 一个牢固的路由系统 o 一个模板引擎 o 一个可以解决上面所有需求轻量JavaScript框架
  • 12. 提纲 • Why • What • 案例 • Questions
  • 13. What Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
  • 14. What Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
  • 15. What Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
  • 16. What Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
  • 17. What Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
  • 18. What • 依赖: o Underscore.js o jQuery 或者 Zepto o Json2.js
  • 20. What MVC Model / Collection 数据(模型)
  • 21. What MVC Model / Collection 数据(模型) Template 展现层(视图)
  • 22. What MVC Model / Collection 数据(模型) Template 展现层(视图) View 控制器
  • 23. What MVC Model / Collection 数据(模型) Template 展现层(视图) View 控制器 Router ???
  • 24. What MVC Model / Collection 数据(模型) Template 展现层(视图) View 控制器 Router ??? Controller
  • 25. What • 模型(Model) o 用来存放应用的所有数据对象 o 能够被创建、验证和销毁等 o 属性的改变会触发“change”事件
  • 26. What 模型 • Fetch HTTP GET /url • Save(new) HTTP POST /url • Save HTTP PUT /url/id • Destroy HTTP DELETE /url/id
  • 27. What var Comment = Backbone.Model.extend(); var comment = new Comment({ id: 6378, text: “高富帅的设计”, created_at: “3小时前”, user: { id: ”sasaliu”, user_name_zh: “刘沙” } });
  • 28. • extend • constructor/initialize • get • set • escape • has • unset • clear • id • cid • attributes • defaults • toJSON comment.get(‘text’ ); //高富帅的设计 comment.set( {‘text’:”<script>console.log(‘xss’)</script>”}, {silent: true} ); comment.escape(‘text’);// &lt;script&gt;console.log(&#x27xss&#x27)&lt;&#x2F; script&gt; comment.has(‘city’ );//false comment.unset(‘text’); //触发’change’事件 var Comment = new Backbone.Model.extend({ //hash or function() defaults: { ‘root’: ‘tea.cdc.com’ }, initialize: function(){…} }); var comment = new Comment(); comment.get(‘root’); //’tea.cdc.com’
  • 29. • fetch • save • desrtoy • validate • url • urlRoot • parse • clone • isNew • change • hasChanged • changedAttributes • previous • previousAttributes var Comment = new Backbone.Model.extend({ urlRoot: ‘/comments’, initialize: function(aUrs){ … } }); var comment = new Comment({id: 123456}); comment.url(); // ‘/comments/123456’ comment.fetch(); var Comment = new Backbone.Model.extend({ initialize: function(aUrs){ … }, validate: function(aUrs){ if(aUrs.text.length < 1){ return ‘回复不能为空’; } } }); var comment = new Comment(); comment.set({text: ‘’},{ error: function(model, error){ alert(error); } });
  • 30. What • 集合(Collection) o 模型的有序组合 o Add,Remove,Fetch,Reset,Create,Sort
  • 31. What var Comments = new Backbone.Collection.extend({ model: Comment, initialize: function(models, options){ } });
  • 32. What [ { id: 6378, text: “高富帅的设计”, created_at: “3小时前”, user: { id: ”sasaliu”, user_name_zh: “刘沙”, user_name_en: "ʺsasaliu"ʺ, small_avatar: "ʺ/data/photo/sp__201203291751346381.jpg"ʺ ... } }, {...} {...} ]
  • 33. What • extend • model • constructor/initialize • models • toJSON • Underscore Methods(25) • get • getByCid • at • length • comparator • sort • pluck • url • parse Comments = Backbone.Collection.extend({ model: Comment, initialize: function(models, options){ this.url = “/comments”; }, comparator: function(model){ return model.get(“id”); } });
  • 34. Add,Remove,Fetch,Reset,Create,Sort collection.create(aUributes, [options]) var Comments = new Comments([{…}]); Comments.create({text:”高富帅的设计”}); var comment = new Comment({ text: “高富帅的设计” }); comment.save(); Comments.add(comment);
  • 35. What • 视图(View) o 一个逻辑的UI组件 o 委托DOM事件 o 负责实例化集合
  • 38. App.Views.Comment = Backbone.View.extend({ className: 'ʹ comment-­‐‑item'ʹ, template: $('ʹ#comment-­‐‑item-­‐‑template'ʹ).html(), events: { "ʺmouseenter"ʺ: "ʺshowActions"ʺ, "ʺmouseleave"ʺ: "ʺhideActions"ʺ }, initialize: function(){ _.bindAll(this,'ʹrender'ʹ); this.model.bind('ʹchange'ʹ, this.render); }, render: function(){ $(this.el).html(_.template( this.template,this.model.toJSON())); $(this.el).aUr({ 'ʹdata-­‐‑comment-­‐‑id'ʹ: this.model.id }); return this; }, showActions: function(e){ this.$('ʹ.reply'ʹ).show(); }, hideActions: function(e){ this.$('ʹ.reply'ʹ).hide(); } });
  • 39. var view = new App.Views.Comment({ model: model }); $('ʹbody'ʹ).append(view.render().el);
  • 40. What • 路由(Backbone.Router) o 将应用程序的状态和URL的哈希片段关联在一起 o 根据路由规则,连接到指定的动作和事件
  • 41. App.Router.page = Backbone.Router.extend({ routes: { “”: “index”, “help”: “help”, // #help “search/:query”:”search”, // #search/miyukizhang }, initialize: function(){ Backbone.history.start(); }, index: function(){ /* … */}, help: function(){ // … }, search: function(query){ // … } });
  • 42. Router Data Source Model/Collection Template View
  • 43. • 其他 What Backbone.js o Backbone.history o Backbone.sync o Utility Function
  • 44. 提纲 • Why • What • 案例 • Questions
  • 46. 提纲 • Why • What • 案例 • Questions