201507271337_ "backbone three--event, Controller (Router), View, Collection, Model"

I. Event

Once a new object is created and mixed with the event, the object can be used as an event method.

For example:

1 varobj = {};//JS Object2 _.extend (obj, backbone.events);     //extend the backbone.events to the Obj object. At this point the object has a way of manipulating the event. _ is an object of Underscore.js, equivalent to $ in jquery.js3 4Obj.bind (' Data ',function(data) {5Console.log (' Receive Data: ' +data); 6  }); 7Obj.trigger (' Data ', ' i/' m an backbone.event '); Print Receive DATA:I 'm an backbone.event8Obj.unbind (' Data '); 9Obj.trigger (' Data ', ' i/' m an backbone.event ');

In addition, if there are many events, you can add namespaces to the event, such as "change:selection". Property events are triggered before normal events. Like what:

We listened to the change event and then listened to the Change:name property event, but the Change event (the value that changed the name) always triggers the property event before triggering the switch event. If the change is not a value of name but a different value, this will only trigger the changes event, not the Change:name property event.

Two. Route (Controller)

var controller = Backbone.Controller.extend ({
Routes: {
"": "Home",
"!/comments": "Comments",
"!/mentions": "mentions",
"!/:uid": "Profile",
"!/:uid/following": "Following",
"!/:uid/followers": "Followers",
"!/:uid/status/:id": "Status",
"!/search/users/:query": "User_search",
"!/search/:query": "Search"
},
Initialize:function () {...} ,
Home:function () {...},
Comments:function () {...},
Mentions:function () {...},
Profile:function (a) {...},
Status:function (A, b) {...},
Following:function (a) {...},
Followers:function (a) {...},
User_search:function (a) {...},
Search:function (a) {...}
});

var custom = new Controller ();

Backbone.history.start ();

... ...

Three. Route (Controller)

View has two functions to Monitor events and display data

var view = Backbone.View.extend ({
Model:user,//The model of this view
ClassName: "Components Cross",
Template: $ ("#user-info-template"). HTML (),
Initialize:function () {//new view ({}) will call this initialization method
_.bindall (This, "render");
This.model.bind ("Change", This.render)//model user Binding Change Event
},
Render:function () {
var a = This.model;
$ (this.el). HTML (mustache.to_html (This.template, A.tojson ())); Use the Mustache Template Library to parse the template, convert the data in the model user into JSON, and display it in the template
$ (This.el). Find (". Days"). HTML (function () {//Make minor changes
var B = a.get ("Created_at"); The value of Created_at taken to the model user
return b;
});
return this;
}
});

In initialize, once the user class (model) triggers the Change event, the Render method is executed and the new view is displayed.
There is always a convention in the Render method, commonly known as the notation. This.el is a DOM object, and the purpose of render is to fill the contents into the This.el. This.el will create an empty div based on the view provided by the tagname, className, id attribute, if none.
After updating the This.el, we should return this so that we can continue with the following chained call (if any).
We can also use $ (view.el). Remove () or view.remove () to easily empty the DOM.
The view layer has a mechanism for delegating events.

var view = Backbone.View.extend ({
ClassName: "Likers-manager",
Template: $ ("#likers-components-template"). HTML (),//Templates HTML
Events: {
"Click. Btn-more": "Loadmore"
},
Initialize:function () {//new view ({}) will invoke the
_.bindall (This, "render", "Updatetitle", "Loadone", "Loadall", "Loadmore"); Call the Bingall method of underscore
},
Render:function () {...},
Updatetitle:function () {...},
Loadone:function (a) {...},
Loadall:function () {...},
Loadmore:function (a) {...}
});
In this there is a key-value pair of events in the format {"Event selector": "Callback"}, where click is the event. Btn-more is a this.el-based selector, so once a contract is done, the Loadmore method is executed when the user taps the. Btn-more element.

Four. Model

1. Model is used to create data, validate data, and store data on the server side. Models can also bind events. For example, the user action changes trigger the model Change event, all views showing this model data will receive this event, to redraw.
The simplest definition is as follows:

var Game = Backbone.Model.extend ({});

A little bit more complicated:

var  Game =function() {     }, defaults: {              ' Default title ',              ', '} });

Initialize equivalent to the constructor method, called at initialization time (called when new)
Simple and practical:

var New Game ({name: "Portal 2", releasedate:2011var release = Portal.get (' releasedate '"Portal 2 by V Alve "});

At this point the data is also in memory and needs to be executed by the Save method before it is committed to the server:

Portal.save ();

Five. Collection

Equivalent to the collection of model. It is important to note that when defining collection, you must specify the model. Let's add a method to this collection, as follows:

var 　　Gamescollection = Backbone.Collection.extend ({    model: Game,    function() {   return this. Filter (function(game) {        　　return game.get (' ReleaseDate ') < 　     });  } });

The collection is used as follows:

var New gamescollection Games.get (0);

Of course, you can also dynamically compose the collection as follows:

var gamescollection = Backbone.Collection.extend ({

Model:game,
URL: '/games '

});

var games = new Gamescollection
Games.fetch ();

The URL here tells collection where to get the data, and the Fetch method issues an asynchronous request to the server to get a collection of data components. (Fetch is actually the Ajax method that calls jquery)

Template parsing is a method that is provided in underscore. And underscore is a library that backbone must rely on.
The template parsing method allows us to mix and embed the JS code in the HTML structure, just like embedding Java code in a JSP page:

 <ul>  　　 <%  for(var i= 0; I< Len; I++) { %>  　　 <Li><%=Data[i].title%></Li>  　　 <% } %> </ul> 

With template parsing, we do not need to use the method of stitching strings when generating HTML structures dynamically, and more importantly, we can manage the HTML structure in the view independently (for example: different states may display different HTML structures, we can define multiple individual template files, Load and render on demand). In backbone, you can use the on or off method to bind and remove custom events. Anywhere you can use the trigger method to trigger these bound events, all the methods that have been bound to the event will be executed, such as:

var New Backbone.model (); Model.on (function(p1, p2) {      });  Model.on (function(p1, p2) {     }); Model.trigger (' Custom ', ' value1 ', ' value2 ');   // will call the above bound two methods Model.off (' Custom '); Model.trigger (' Custom '); // The custom event is triggered, but no function is executed, and the function already in the event has been removed  in the previous step

To adapt an existing data interface by overloading the Backbone.sync method

201507271337_ "backbone three--event, Controller (Router), View, Collection, Model"