Initial knowledge of lightweight front-end development framework Backbone

The front-end development of JavaScript framework in the industry is already famous, but the landlord has not contacted, see the wind evaluation this year do not understand backbone how dare to go out to install

The work of these days is still not nervous, speed charge

The front-end JavaScript framework based on jquery and underscore

Backbone.js is a JavaScript lightweight MVC framework developed by the Web front-end, which allows us to define classes, class properties and methods like high-level languages, better organize code and reduce code clutter by logically separating the data that is provided by the framework

Required files

Need to download these 3 JS files: Zepto (jquery alternative, you can interpret it as the mini version of jquery), underscore, backbone

<src= "Js/zepto.min.js"></script>  <src= "Js/underscore.min.js"></script>  <src= "Js/backbone.min.js"></Script  >

Backbone's 4 modules

Model: Backbone.model, a data model

Collection: Backbone.collection, a collection of data models

Views: backbone.view, data processing

Routing: backbone.router, routing configuration

Model

This is a standard object model (data is assumed to be the most common user of the Web site), initialize is the initialization method, default execution of defined functions or listening for necessary events; defaults is the default parameter of the object model as the initialization parameter.

var User = Backbone.Model.extend ({    function() {    },    defaults: {        ' big White Rabbit ' )         ' Chinese '    });

Instantiate the object model user, and get the object property attributes, the output data structure is: Object {name: "Big White Rabbit", Lang: "Chinese"}

var New User;console.log (user.attributes);

Call the Set method to set the object model to specify properties, get methods to get the object model to specify property values

var New  ' Little White Rabbit '}); Console.log (User.get (' name '));

The initialization method initialize the change of the property change event and customizes the property changes in the callback information hint

var User = Backbone.Model.extend ({    function() {        thisfunction  () {            Console.log (this. attributes);        }    ,    defaults: {        ' big White Rabbit ' ,        ' Chinese '    },}); var New  "});

Call the Save method to submit the object model data, set the data submission address URL

var User = Backbone.Model.extend ({    '/'}); var New User; User.save ();

Now that you are ready to submit the object model data, the data validation method validate the custom data checking method, the initialization method initialize the error in the listener commit failure event, and the callback to customize the information prompt to return the errors; a complete demo of the model

varUser =Backbone.Model.extend ({URL:‘/‘, Initialize:function(){         This. bind (' Change:name ',function() {Console.log ( This. attributes);        });  This. bind (' Error ',function() {Console.log (' Data submission failed ');    }); }, Defaults: {Name:' Big White Rabbit ', Lang:Chinese}, Validate:function(obj) {if(Obj.name.length < 2) console.log (' nickname too Short '); }});varuser =NewUser;user.set ({name:‘‘}); User.save ();

Collection

Now we want to put the data of the instantiated object model in the Instantiation object collection, we need to set up, here a bit around, the landlord here around for a long time, it can be understood that by changing the properties of the user set model of the value of the models, so as to specify the model associated with the collection users, The model here is the user

var User = Backbone.Model.extend ({    function() {    },    defaults: {        ",        "}    ); var Users = Backbone.Collection.extend ({    model:user});

Instantiates a collection of objects and adds an add group to the collection of objects specifying the data that you want to instantiate in model mode, and then print all the model data in the object collection

var New Users; var arr = [' Big White Rabbit ', ' Chinese '], [' Beckham ', ' English '], [' Zidane ', ' French '];  for (var i = 0; i < arr.length; i + +)    {varnew  User ({        name:arr[i][0],        lang:arr[i][1]    });    Users.add (user);}; Users.each (function(obj) {    console.log (obj.attributes);});

Initialize method Initialize listen for data add event adds and customize data after adding information in callback

var Users = Backbone.Collection.extend ({    function() {        thisfunction  (obj) {            console.log (' Add ', obj.attributes);});}    ,    model:user});

Since it is the data, there are additions and deletions; With Add event, corresponding object data Delete event remove, object data Change event changes; A complete demo of the collection

varUser =Backbone.Model.extend ({initialize:function() {}, defaults: {Name:‘‘, Lang:‘‘    }});varUsers =Backbone.Collection.extend ({initialize:function(){         This. bind (' Add ',function(obj) {console.log (' Add ', obj.attributes);        });  This. bind (' Remove ',function(obj) {console.log (' Remove ', obj.attributes);        });  This. bind (' Change ',function(obj) {console.log (' Change ', obj.attributes);    }); }, Model:user});varUsers =NewUsers;vararr = [[' Big White Rabbit ', ' Chinese '], [' Beckham ', ' English '], [' Zidane ', ' French ']]; for(vari = 0; i < arr.length; i + +){    varuser =NewUser ({name:arr[i][0], lang:arr[i][1]    }); Users.add (user);}; User.set ({name:' Kahn ', Lang:German}); Users.remove (user) ;

This would like to write the view together, but found that the view must have a relative model, so the view model of cooperation is the focus, although the landlord is also a good example but also unclear, I think after mature and then specifically said lest astray mistake oneself

There are many documents on the Internet, but each person's ability to understand the way is different, people may need different articles to understand, the landlord so that his understanding of the way to stay

Initial knowledge of lightweight front-end development framework Backbone