Backbone.js Series Tutorial One-backbone.js introduction

JavaScript in the Web application development front-end technology and back-end technology logic and run a larger proportion of the share. In order to help maintain and iterate prior logic and modularity, the MVC pattern has become increasingly popular in recent years. One of the widely used MVC frameworks is backbone.js.

Models (model), Views (view) and controller (Controller) in backbone

Backbone.js includes the following key features:

1. Create models (and model collections);
2. Create a view;
3. Manage bindings, manage events with different models and links to other parts of the framework;
4. Using the Observer pattern in the model, once the model triggers any change events, all views showing the data for this model receive the Change event notification, and the event is automatically rendered again;
5. Provides support for the jquery or zepto that DOM processing relies on.

Part I.: Model (MODELS)

To create a model, we first create a person object that contains data.

 
  
  

  
   
   
Person = Backbone.Model.extend ({
  
   
   
Constructor for person instance
  
   
   

  
   
   
Console.log ("Hello World");
  
   
   
}
  
   
   
});
  
   
   

  
   
   
var p = new person ();
 
  
  
 
It's simple, right? Now that we've added some parameters to this person object and provided more data, we've added the name and height attributes.
 
 
  
   

  
   
    
var p = new Person ({name: "Matt", Height: "6\" 2 "});
  
   
    

  
   
    
Console.log (P.get ("name"));
 
  
   
 
If we do not provide name and height, the two properties of this person object will be empty, so we now provide the default property settings for the person object.
 
 
  
    

  
   
     
Person = Backbone.Model.extend ({
  
   
     
Initialize:function () {
  
   
     
Console.log ("Hello World");
  
   
     
},
  
   
     
Defaults: {
  
   
     
Name: "Mark",
  
   
     
Height: "3\" "
  
   
     
}
  
   
     
});
  
   
     

  
   
     
var p = new person ();
  
   
     
P.set ({name: "Matt", Height: "6" 2\ "});
  
   
     
Console.log (P.get ("name"));
 
  
    
 
Backbone binding function is very powerful, when the Model data changes, can automatically trigger methods, update view views. 
 
 
  
     

  
   
      
Person = Backbone.Model.extend ({
  
   
      
Initialize:function () {
  
   
      
Console.log ("Hello World");
  
   
      

  
   
      
When the Name property changes, add a binding function
  
   
      
This.bind ("Change:name", function () {
  
   
      
Console.log (This.get ("name") + "is now the value for name");
  
   
      
});
  
   
      
},
  
   
      
Defaults: {
  
   
      
Name: "Bob Hope",
  
   
      
Height: "Unknown"
  
   
      
}
  
   
      
});
 
  
     
 
We certainly want the data in the backbone model to be valid, so we add the Error,validate method to make sure that the data is valid before the object is created.
 
 
     

  
      

      
Person = Backbone.Model.extend ({
  
      

      
Initialize:function () {
  
      

      
Console.log ("Hello World");
  
      

      

  
      

      
This.bind ("Change:name", function () {
  
      

      
Console.log (This.get ("name") + "is now the value for name");
  
      

      
});
  
      

      

  
      

      
Add a method that is bound to error errors to handle error data
  
      

      
This.bind ("Error", Function (model, error) {
  
      

      
Console.error (Error);
  
      

      
});
  
      

      
},
  
      

      
Defaults: {
  
      

      
Name: "Bob Hope",
  
      

      
Height: "Unknown"
  
      

      
},
  
      

      
Validate:function (attributes) {
  
      

      
if (Attributes.name = = "Joe") {
  
      

      
return error message
  
      

      
Return ' Uh Oh, you ' re name is joe!;
  
      

      
}
  
      

      
}
  
      

      
});
  
      

      

  
      

      
var person = new person ();
  
      

      
Person.set ({name: "Joe", Height: "6 feet"});
  
      

      

  
      

      
Console.log (Person.tojson ());
 
     
 
Part Two: view (views)
 
Style of HTML:
 
 
  
      

  
   
       
#container
  
   
       
Button Load
  
   
       
Ul#list
  
   
       

  
   
       
#list-template
  
   
       
Li
  
   
       
A (href= "")
 
  
      
 
Backbone Call:
 
 
  
       

  
   
        
A simple model
  
   
        
var Links = Backbone.Model.extend ({
  
   
        
data:[
  
   
        
{text: "Google", href: "http://google.com"},
  
   
        
{text: "Facebook", href: "http://facebook.com"},
  
   
        
{text: "Youtube", href: "http://youtube.com"}
  
   
        
]
  
   
        
});
  
   
        

  
   
        
var View = Backbone.View.extend ({
  
   
        
Creating constructors
  
   
        
Initialize:function () {
  
   
        
Console.log ("Init");
  
   
        
}
  
   
        
});
  
   
        

  
   
        
var view = new View ();
 
  
       
 
We start with the options for the view:
 
 
  
        

  
   
         
var View = Backbone.View.extend ({
  
   
         
Options--> objects provided to constructors
  
   
         
Initialize:function () {
  
   
         
Console.log (this.options.blankOption);
  
   
         
}
  
   
         
});
  
   
         

  
   
         
var view = new View ({blankoption: "empty string"});
  
   
         
View.blankoption///will play "empty string" in the console.
 
  
        
 
There are also special preset Options,el parameters that allow you to attach the view to elements that already exist on the page.
 
 
  
         

  
   
          
var View = Backbone.View.extend ({
  
   
          
Initialize:function () {
  
   
          
Console.log (this.options.blankOption);
  
   
          
This.el-> #在DOM中列出
  
   
          
}
  
   
          
});
  
   
          

  
   
          
var view = new View ({el: $ ("#list")});
 
  
         
 
You can also create a new element:
 
 
  
          

  
   
           
var View = Backbone.View.extend ({
  
   
           
Initialize:function () {
  
   
           
Console.log (this.options.blankOption);
  
   
           
This.tagname--> Create a "tagName" item in the DOM
  
   
           
$ ("Body"). Append (This.el)
  
   
           
}
  
   
           
});
  
   
           

  
   
           
var view = new View ({tagName: "div", ClassName: "Class", ID: "", Attributes: ""}); --> creates a div tag with class "Class"
 
  
          
 
In this step, we're going to use a static invariant target
 
 
  
           

  
   
            
var View = Backbone.View.extend ({
  
   
            
Initialize:function () {
  
   
            
Console.log (This.el);
  
   
            
},
  
   
            
El: "#container"
  
   
            
});
  
   
            

  
   
            
var view = new View ({Model:new Links ()}); From the snippet
 
  
           
 
Then add some event actions:
 
 
           

  
            

            
var View = Backbone.View.extend ({
  
            

            
Initialize:function () {
  
            

            
Doing nothing
  
            

            
Render () calls two times render
  
            

            
},
  
            

            
El: "#container",
  
            

            
Events: {
  
            

            
"Click button": "Render"
  
            

            
},
  
            

            
Render:function () {//Usually this method is called by backbone
  
            

            
var data = This.model.get ("Data");
  
            

            

  
            

            
For (Var i=0, l=data.length i
  
            

            
var li = this.template
  
            

            
. Clone ()
  
            

            
. Find ("a")
  
            

            
. attr ("href", data[i].href)
  
            

            
. Text (Data[i].text)
  
            

            
. end ();
  
            

            
this. $el//<--this. $el is a jquery object for the view element, This.el is a DOM object
  
            

            
. Find ("Ul#list"). Append (LI);
  
            

            
}
  
            

            
}
  
            

            
});
  
            

            

  
            

            
var view = new View ({Model:new Links ()});
 
           
 
Part III: Routers (Router)
 
The 
 routers provide navigation and control, and let us send instructions to the Web application. You can navigate by adding sub-urls or labels, and you can quickly locate the exact characteristics of your application by linking. 
 
 
  
            
 
   
             
var Router = Backbone.Router.extend ({
 
   
             
 routes: {
 
   
             
//This will match any URL is in accordance with foo/ and provide : bar: As a parameter, transferred to the Paramtest method 
 
   
             
//: matches the next URI 
 
   
             
/So #foo/1 will call Paramtest (1) 
  
   
             
 "Foo/:bar": "Paramtest", 
  
   
             
&NBSP; 
  
   
             
 
   
             
 "*action": "Func" 
  
   
             
 
   
             
 Func:function (action) {
 
   
             
 Console.log (action); 
  
   
             
 
   
             
 Paramtest:function (p) {
 
   
             
 Console.log (p); 
  
   
             
} 
 
   
             
}); 
  
   
             
&NBSP; 
  
   
             
new Router (); 
  
   
             
&NBSP; 
 
   
             
backbone.history.start (); 
 
  
            
 
Part IV: Collection (Collections)
 
Collections provide a mechanism to combine multiple instance models and provide powerful features to maintain and collect data into the list.
 
 
            

  
             

             
This is our original person model.
  
             

             
var person = Backbone.Model.extend ({
  
             

             
Initialize is called when we create the person object
  
             

             
Initialize:function () {
  
             

             
Console.log ("person is initialized.");
  
             

             
},
  
             

             

  
             

             
Default Properties
  
             

             
Defaults: {
  
             

             
Name: "Undefined",
  
             

             
Age: "Undefined"
  
             

             
}
  
             

             
});
  
             

             

  
             

             
Create a collection!
  
             

             
var people = Backbone.Collection.extend ({
  
             

             
Called when the collection is created
  
             

             
Initialize:function () {
  
             

             
Console.log ("People Collection is initialized");
  
             

             
},
  
             

             

  
             

             
Define a data model for saving into a collection
  
             

             
Model:person
  
             

             
});
  
             

             

  
             

             
Create a new Person object
  
             

             
var person = new Person ({name: "Joe"});
  
             

             

  
             

             
Create a collection and then add the person object to the collection
  
             

             
var people = new people (person);
  
             

             
People.add ([{name: "Bob"}, {name: "Jim"}]);
  
             

             

  
             

             
In the console, the data for this data model is typed
  
             

             
Console.log (People.tojson ());
 
            
 
So we've finished with the available collections that contain the models and views.
 
This is about backbone's MVC introduction, in the next article, we will introduce its specific usage, hope this is helpful to everyone. If you have any questions, you can leave a question