simple introduction about backbone.js

1. BACKBONE
INTRO, MODEL
divaka / 2012/07/24

2. Author
Profile：
http://about.me/divaka
Blog：
http://design2u.me/blog

3. WHAT’s Backbone
A JavaScript MVC Framework

4. Problems
 coding style are different
 Spaghetti Code
 UI
 Function
 No Class
 Everything need to rebuild

5. In the Past
CRUD Reque Put
Action Controller st Server DB
data Success okay
CRUD Reque Put
Action Controller st Server DB
data Success okay
CRUD Reque Put
Action Controller st Server DB
data Success okay
CRUD Reque Put
Action Controller st Server DB
data Success okay

6. Advantage
 MVC
Data Stored
Model
Control View Merged UI
Action Delegate UI Control

7. With Backbone
Model Model Model
Controller View View View
UI

8. Advantage
 Manage Code Easily

9. Advantage
 Automatic update UI while Model changed
Form
notify
notify Table
DB Model
notify
DOM

10. Advantage
 Template Engine
 By underscore.js
Template + data = UI

11. BACKBONE MODEL

12. Model

13. Collection

14. View – Control UI

15. Router - Binding URL

16. 參考資料
 Website
 英文官網
 中文官網翻譯
 English
 Backbone JS – Hello World tutorial
 Backbone.js Lessons Learned and Improved Sample App
 Backbone: Dealing with stateful applications (part 1)
 Asynchronously Load HTML Templates For Backbone Views
 Chinese
 用 Backbone.js, underscore.js 和 jQuery 创建页面应
 Javascript 前端工具 Backbone.js Framework 初學介紹
 Backbone.js Event 事件介紹
 小鐵的投影片介紹
 Example
 新建 FriendList
 Backbone, Amber, Knockout 效能比較

17. DEMO
1. Simple Model
2. Hello Backbone
3. Get Model Data
4. Delete Model data
5. Model extend
6. Auto Update