2. PLAN
1. Introduction.
2. MVC and other models in JavaScript.
3. Third party library for Backbone.
4. Model with Backbone.
5. Collection with Backbone.
6. View with Backbone.
7. Demo.
8. Question and Answer?
3. INTRODUCTION
• JavaScript found in 1995(stable 1.8.5 in 2011).
• JavaScript frameworks:
• MochiKit(2008).
• Rico(2009).
• YUI(2011).
• Ext JS(2011).
• Dojo(2011).
• Echo3(2011).
• jQuery(2012).
• …and other frameworks here.
4. COMPARISON
jQuery Ext JS YUI
Files 1 1 1
.js (LOC) 9047 13471 10526
• Is it easy to read?
• Is it easy to upgrade?
• How can I add a new feature?
• Does these library support OOP?
• 3 layers?
• MVC?
• ‘spaghetti ’ code
5. COMPARISON( CONT. )
• jQuery, Ext JS, YUI…write code focus on functions,
these library provides api and the users use these
functions to achieve what they want.
• YUI API.
• jQuery API.
• Ext JS API.
6. WHY USE THIS?
• A MVC like pattern to keep code clean.
• A templating language to easily render view
element.
• A better way to manage events and callbacks.
• A way to preserver back button.
• Easy for testing.
7. PLAN
1. Introduction.
2. MVC and other models in JavaScript.
3. Third party library for Backbone.
4. Model with Backbone.
5. Collection with Backbone.
6. View with Backbone.
7. Demo.
8. Question and Answer?
8. MVC AND OTHER MODELS IN
JAVASCRIPT.
• MV*
• MVC
• MVP
• MVVM
• …
10. PLAN
1. Introduction.
2. MVC and other models in JavaScript.
3. Third party library for Backbone.
4. Model with Backbone.
5. Collection with Backbone.
6. View with Backbone.
7. Demo.
8. Question and Answer?
11. THIRD PARTY LIBRARY FOR BACKBONE.
• Selector:
• jQuery
• YUI
• Zepto
• Template:
• Underscore(hard dependency)
• Handlebar
• Tempo
• Mustache
12. ARCHITECT OF A BACKBONE PROJECT
• Assets: CSS, images, third party JavaScript library…
• Modules: Our source, view.js, model.js
• Have more directories when project come
larger…
16. PLAN
1. Introduction.
2. MVC and other models in JavaScript.
3. Third party library for Backbone.
4. Model with Backbone.
5. Collection with Backbone.
6. View with Backbone.
7. Demo.
8. Question and Answer?
17. MODEL
• Manage data(CVDP).
• Change the data of a model notify changes to
view
1. var Photo = Backbone.Model.extend({
2. // Default attributes for the photo
3. defaults: {
4. src: "placeholder.jpg",
5. caption: "A default image",
6. viewed: false
7. },
8. // Ensure that each photo created has an `src`.
9. initialize: function () {
10. this.set({ "src": this.defaults.src });
11. }
12. });
18. MODEL(CONT.)
• Validation data.
• Persistence data on server.
• Allow multiple views on a model.
• …
19. PLAN
1. Introduction.
2. MVC and other models in JavaScript.
3. Third party library for Backbone.
4. Model with Backbone.
5. Collection with Backbone.
6. View with Backbone.
7. Demo.
8. Question and Answer?
20. COLLECTION
• Group models .
• Trigger events like add/remove/refresh.
• Can fetch models from a given URL.
• Can keep the model sorted.
• Write application logic based on notifications from
the group should any model it contains be
changed.
needn’t to watch every individual model instance.
21. COLLECTION(CONT.)
1.var PhotoGallery = Backbone.Collection.extend({
2. // Reference to this collection's model.
3. model: Photo,
4. // Filter down the list of all photos
5. // that have been viewed
6. viewed: function() {
7. return this.filter(function(photo){
8. return photo.get('viewed');
9. });
10. },
11. // Filter down the list to only photos that
12. // have not yet been viewed
13. unviewed: function() {
14. return this.without.apply(this, this.viewed());
15. }
16.});
22. PLAN
1. Introduction.
2. MVC and other models in JavaScript.
3. Third party library for Backbone.
4. Model with Backbone.
5. Collection with Backbone.
6. View with Backbone.
7. Demo.
8. Question and Answer?
23. VIEW
• Visual representation of models .
• Observes a model and is notified when the model
changes update accordingly.
• View in Backbone isn’t a CONTROLLER , it just can
add an event listener to delegate handling the
behavior to the controller.
24. 1.var buildPhotoView = function( photoModel, photoController ){
2. var base = document.createElement('div'),
3. photoEl = document.createElement('div');
4. base.appendChild(photoEl);
5. var render= function(){
6. // We use a templating library such as Underscore
7. // templating which generates the HTML for our photo entry
8. photoEl.innerHTML = _.template('photoTemplate', {src: photoModel.getSrc()});
9. }
10. photoModel.addSubscriber( render );
11. photoEl.addEventListener('click', function(){
12. photoController.handleEvent('click', photoModel );
13. });
14. var show = function(){
15. photoEl.style.display = '';
16. }
17. var hide = function(){
18. photoEl.style.display = 'none';
19. }
20. return{
21. showView: show,
22. hideView: hide
23. }
24.}
25. CONTROLLER
• Backbone didn’t actually provide a Controller.
• In Backbone, View and Router does a little similar to
a Controller.
• Router binds the event for a Model and have View
for respond to this event.
1. var PhotoRouter = Backbone.Router.extend({
2. routes: { "photos/:id": "route" },
3. route: function(id) {
4. var item = photoCollection.get(id);
5. var view = new PhotoView({ model: item });
6. something.html( view.render().el );
7. }
8. }):
26. BENEFITS OF MVC
1. Easier overall maintenance.
2. Decoupling models and views easy to write unit
test and business logic.
3. Duplication of low-level model and controller
code is eliminated across the application.
4. Work simultaneously between core logic and user
interface.
27. NOTES
• Core components: Model, View, Collection, Router.
• Complete documentation.
• Used by large companies such as SoundCloud and
Foursquare.
• Event-driven communication.
• No default templating engine.
• Clear and flexible conventions for structuring
applications.
• …
28. PLUGIN
• Deeply nested models:
• Backbone Relational
• Ligament
• Store data:
• Backbone localStorage
• Small Backbone ORM
• View:
• LayoutManager
• Backbone.Marionette
• More at here.
29. DEMO
• Other demo can view here:
• Todos
• Backbone Google Book
• Todos of Niquet
• …
Models manage the data for an application. They are concerned with neither the user-interface nor presentation layers but instead represent unique forms of data that an application may require. When a model changes (e.g when it is updated), it will typically notify its observers (e.g views, a concept we will cover shortly) that a change has occurred so that they may react accordingly.To understand models further, let us imagine we have a JavaScript photo gallery application. In a photo gallery, the concept of a photo would merit its own model as it represents a unique kind of domain-specific data. Such a model may contain related attributes such as a caption, image source and additional meta-data. A specific photo would be stored in an instance of a model and a model may also be reusable. Below we can see an example of a very simplistic model implemented using Backbone.The built-in capabilities of models vary across frameworks, however it is quite common for them to support validation of attributes, where attributes represent the properties of the model, such as a model identifier. When using models in real-world applications we generally also desire model persistence. Persistence allows us to edit and update models with the knowledge that its most recent state will be saved in either: memory, in a user's localStorage data-store or synchronized with a database.In addition, a model may also have multiple views observing it. If say, our photo model contained meta-data such as its location (longitude and latitude), friends that were present in the a photo (a list of identifiers) and a list of tags, a developer may decide to provide a single view to display each of these three facets.It is not uncommon for modern MVC/MV* frameworks to provide a means to group models together (e.g in Backbone, these groups are referred to as "collections"). Managing models in groups allows us to write application logic based on notifications from the group should any model it contains be changed. This avoids the need to manually observe individual model instances.
