Backbone introdunction
-
Upload
mzxbupt -
Category
Technology
-
view
665 -
download
0
Transcript of Backbone introdunction
![Page 1: Backbone introdunction](https://reader031.fdocuments.net/reader031/viewer/2022020116/55946fab1a28aba00e8b4617/html5/thumbnails/1.jpg)
an intro to the javascript mvc framework
![Page 2: Backbone introdunction](https://reader031.fdocuments.net/reader031/viewer/2022020116/55946fab1a28aba00e8b4617/html5/thumbnails/2.jpg)
plan
Why BackboneBackbone architectureExamples
![Page 3: Backbone introdunction](https://reader031.fdocuments.net/reader031/viewer/2022020116/55946fab1a28aba00e8b4617/html5/thumbnails/3.jpg)
What we want to avoid
We have to store object informations into the DOM
![Page 4: Backbone introdunction](https://reader031.fdocuments.net/reader031/viewer/2022020116/55946fab1a28aba00e8b4617/html5/thumbnails/4.jpg)
What we want to avoid
callback hell
![Page 5: Backbone introdunction](https://reader031.fdocuments.net/reader031/viewer/2022020116/55946fab1a28aba00e8b4617/html5/thumbnails/5.jpg)
![Page 6: Backbone introdunction](https://reader031.fdocuments.net/reader031/viewer/2022020116/55946fab1a28aba00e8b4617/html5/thumbnails/6.jpg)
Why Backbone
So, what do we need?• Abstraction.• Decoupling UI from Data.• No more callbacks.
![Page 7: Backbone introdunction](https://reader031.fdocuments.net/reader031/viewer/2022020116/55946fab1a28aba00e8b4617/html5/thumbnails/7.jpg)
Backbone.jsFrom the Backbone website...
Backbone.js gives structure to web applications by providingmodels 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.
represent datas
list of modelmanipulate doms
![Page 8: Backbone introdunction](https://reader031.fdocuments.net/reader031/viewer/2022020116/55946fab1a28aba00e8b4617/html5/thumbnails/8.jpg)
Architecture
![Page 9: Backbone introdunction](https://reader031.fdocuments.net/reader031/viewer/2022020116/55946fab1a28aba00e8b4617/html5/thumbnails/9.jpg)
Backbone s Modelʼ
Representing data
Handling persistence
Throws events
![Page 10: Backbone introdunction](https://reader031.fdocuments.net/reader031/viewer/2022020116/55946fab1a28aba00e8b4617/html5/thumbnails/10.jpg)
Backbone s Modelʼ
![Page 11: Backbone introdunction](https://reader031.fdocuments.net/reader031/viewer/2022020116/55946fab1a28aba00e8b4617/html5/thumbnails/11.jpg)
Backbone s Modelʼ
![Page 12: Backbone introdunction](https://reader031.fdocuments.net/reader031/viewer/2022020116/55946fab1a28aba00e8b4617/html5/thumbnails/12.jpg)
Backbone s ʼ View
Manipulates the Dom
delegates Dom events
![Page 13: Backbone introdunction](https://reader031.fdocuments.net/reader031/viewer/2022020116/55946fab1a28aba00e8b4617/html5/thumbnails/13.jpg)
Backbone s ʼ View
![Page 14: Backbone introdunction](https://reader031.fdocuments.net/reader031/viewer/2022020116/55946fab1a28aba00e8b4617/html5/thumbnails/14.jpg)
Backbone s ʼ View
![Page 15: Backbone introdunction](https://reader031.fdocuments.net/reader031/viewer/2022020116/55946fab1a28aba00e8b4617/html5/thumbnails/15.jpg)
Backbone s ʼ Collections
Collections are ordered sets of models
bind "change" events to be notified when any modelin the collection has been modified
fetch the collection from the server (or otherpersistence layer)
![Page 16: Backbone introdunction](https://reader031.fdocuments.net/reader031/viewer/2022020116/55946fab1a28aba00e8b4617/html5/thumbnails/16.jpg)
![Page 17: Backbone introdunction](https://reader031.fdocuments.net/reader031/viewer/2022020116/55946fab1a28aba00e8b4617/html5/thumbnails/17.jpg)
Backbone s ʼ Collections
_.include([1, 2, 3], 3);=> true
![Page 18: Backbone introdunction](https://reader031.fdocuments.net/reader031/viewer/2022020116/55946fab1a28aba00e8b4617/html5/thumbnails/18.jpg)
APP
![Page 19: Backbone introdunction](https://reader031.fdocuments.net/reader031/viewer/2022020116/55946fab1a28aba00e8b4617/html5/thumbnails/19.jpg)
Architecture
Dependencies:• jQuery or Zepto• Underscore.js 16k
backbone.js 12kMustache.js 14k
![Page 20: Backbone introdunction](https://reader031.fdocuments.net/reader031/viewer/2022020116/55946fab1a28aba00e8b4617/html5/thumbnails/20.jpg)
Examples
![Page 21: Backbone introdunction](https://reader031.fdocuments.net/reader031/viewer/2022020116/55946fab1a28aba00e8b4617/html5/thumbnails/21.jpg)
![Page 22: Backbone introdunction](https://reader031.fdocuments.net/reader031/viewer/2022020116/55946fab1a28aba00e8b4617/html5/thumbnails/22.jpg)
![Page 23: Backbone introdunction](https://reader031.fdocuments.net/reader031/viewer/2022020116/55946fab1a28aba00e8b4617/html5/thumbnails/23.jpg)
![Page 24: Backbone introdunction](https://reader031.fdocuments.net/reader031/viewer/2022020116/55946fab1a28aba00e8b4617/html5/thumbnails/24.jpg)
![Page 25: Backbone introdunction](https://reader031.fdocuments.net/reader031/viewer/2022020116/55946fab1a28aba00e8b4617/html5/thumbnails/25.jpg)
Q u e s t io n s ?