Backbone.js series six: Constructing Backbone objects

Backbone constructors

I say backbone is simple because backbone only four constructors can be typically instantiated (basically, they are first inherited or subcategory). These four constructors include:

• Backbone.model = function (attributes, {options}) {};
• Backbone.collection = function ([models], {options}) {};
• Backbone.router = function ({options}) {}; Can only be materialized once
• Backbone.view = function ({options}) {};

Now let's take a look at what the default instance and stereotype properties are in each instance created by these constructors, and simply implement it with the new keyword without passing parameters. With the browser console open, you can see the instance and prototype properties more clearly.

Model

 
  
  

  
   
   
var MyModel = new Backbone.model ();
  
   
   

  
   
   
Console.log (' MyModel = new Backbone.model (); ');
  
   
   

  
   
   
Console.log (' MyModel Instance Properties: ');
  
   
   
Console.log (_.keys (MyModel));
  
   
   

  
   
   
Console.log (' MyModel Prototype Properties & Methods: ');
  
   
   
Console.log (_.keys (object.getprototypeof (MyModel)));
 
  
  
 
Collection
 
 
  
   

  
   
    
var mycollection = new Backbone.collection ();
  
   
    

  
   
    
Console.log (' var mycollection = new Backbone.collection (); ');
  
   
    

  
   
    
Console.log (' mycollection Instance Properties: ');
  
   
    
Console.log (_.keys (mycollection));
  
   
    

  
   
    
Console.log (' mycollection prototype Properties & Methods: ');
  
   
    
Console.log (_.keys (object.getprototypeof (mycollection)));
 
  
   
 
Router
 
 
  
    

  
   
     
var myrouter = new Backbone.router ({routes:{' foo ': ' Bar '},bar:function () {}});
  
   
     

  
   
     
Console.log (' var myrouter = new Backbone.router (); ');
  
   
     

  
   
     
Console.log (' Myrouter Instance Properties: ');
  
   
     
Console.log (_.keys (myrouter));
  
   
     

  
   
     
Console.log (' Myrouter prototype Properties & Methods: ');
  
   
     
Console.log (_.keys (object.getprototypeof (Myrouter)));
 
  
    
 
View
 
 
  
     

  
   
      
var myview = new Backbone.view ();
  
   
      

  
   
      
Console.log (' var myview = new Backbone.view (); ');
  
   
      

  
   
      
Console.log (' MyView Instance Properties: ');
  
   
      
Console.log (_.keys (MyView));
  
   
      

  
   
      
Console.log (' MyView inherited Properties & Methods: ');
  
   
      
Console.log (_.keys (object.getprototypeof (MyView)));
 
  
     
 
The properties of each constructor are readily available by backbone. However, you usually need to inherit (Backbone.Model.extend ()) your own domain-specific instances, prototype properties, and methods before you construct these functions.
 
Before continuing with the following sections, let's take a quick look at the optional parameter entries for each constructor. There is a section in this chapter that specifically describes the parameters, but you can now get a general idea of the optional argument items.
 
 
     

  
      

      
var MyModel = new Backbone.model (attributes, {options});
  
      

      
/*
  
      

      
attributes = {data:value, data:value} [Value,value]
  
      

      

  
      

      
Options = {
  
      

      
Collection: {},
  
      

      
URL: ',
  
      

      
UrlRoot: ',
  
      

      
Parse:boolean
  
      

      
}
  
      

      
*/
  
      

      

  
      

      

  
      

      
var mycollection = new Backbone.collection (model (s), {options});
  
      

      
/*
  
      

      
Models = model [Model,model,model] {model:data} [{model:data},{model:data}];
  
      

      

  
      

      
Options = {
  
      

      
URL: ',
  
      

      
Model: {},
  
      

      
Comparator:function () {} '
  
      

      
}
  
      

      
*/
  
      

      

  
      

      

  
      

      
var myview = new Backbone.view ({options});
  
      

      
/*
  
      

      
Options = {
  
      

      
Model: {},
  
      

      
Events: {} or function () {return {}}}
  
      

      
Collection: {},
  
      

      
El: ' or function () {return '},
  
      

      
ID: ',
  
      

      
ClassName: ' or function () {return '},
  
      

      
TagName: ' or function () {return '},
  
      

      
Attributes: {Attribute:value,attribute:value}
  
      

      
}
  
      

      
*/
  
      

      

  
      

      

  
      

      
var myrouter = new Backbone.router ({options});
  
      

      
/*
  
      

      
Options = {
  
      

      
routes:{}
  
      

      
}
  
      

      
*/
  
      

      

  
      

      
/* Also pay attention to the historical option * *
  
      

      
Backbone.History.start ({options});
  
      

      
/*
  
      

      
Options = {
  
      

      
Pushstate:boolean,
  
      

      
Root: ",
  
      

      
Hashchange:boolean,
  
      

      
Silent:boolean
  
      

      
}
  
      

      
*/
 
     
 
Tips:
 

    

 
     
 
      
The Router () constructor can be materialized more than once, but when it is given a SPA , it is usually only presented once.
 
      
The backbone.history () constructor is constructed internally by the backbone library itself, when the library is parsed.
 
      
Note that, as mentioned earlier, the prototypes for each constructor in all instances contain backbone.events.
 
     

    
 
Create subclasses Model (), Collection (), Router () , and View () constructors with internal backbone extend () helper functions
 
Building a model, collection, video, or router in backbone mode often involves having a default backbone constructor inherit (create a subclass or constructor) of your own domain-related properties and methods. This step utilizes the extend () auxiliary function, which is the constructor of an attribute. Do not confuse this function with the extend () in underscore.js .
 
In general, the extend () in backbone can accomplish the following functions:
 

    

 
     
 
      
Copy constructor inherited instance value
 
      
Let the new child constructor inherit the developer-defined stereotype properties and static properties
 
      
Facilitates a prototype inheritance between a new constructor (a child constructor) and an inherited constructor
 
      
Add Extend () helper functions to new child constructors, and new child constructors can be inherited to create chain chains of subclasses
 
      
Creates a initialize () callback function that can be invoked when the quilt constructor creates an instance and sets the context of the initialization function
 
     

    
 
For more information on how the backbone extend () method works, please read the following code, detailing the use of the extend () function to inherit a fictitious View constructor (with Backbone.view similar, but not dissimilar, logic. This code is not exactly the preparation code contained in the backbone.js , but rather an independent demonstration, from the code layer when Backbone.model, Backbone.collection, Backbone.view and backbone.router Quilt Classification (I am more accustomed to being called an extended child constructor) what happens when.
 
 
     

  
      

      
/* Create a view constructor that is somewhat similar to the Backbone.view in Backbone.js * *
  
      

      
var View = function (parameter1,parameter2) {
  
      

      
This. IAm = ' View constructor ';
  
      

      
/* Invokes the first initialization function in the prototype chain and sets its scope to this*/
  
      

      
This.initialize.apply (this, arguments); Passing an array of arguments to the initialization function
  
      

      
};
  
      

      

  
      

      
/* When no initialization function is passed to the Extend () function, an empty initialization function is invoked to inherit the prototype of the view constructor.
  
      

      
View.prototype.initialize = function () {};
  
      

      

  
      

      
/* Create a generic static extend () function to create a subclass (subclass constructor) that is considered a property view constructor.
  
      

      
View.extend = function (Protoprops, staticprops) {
  
      

      

  
      

      
var parent = this;/* In code is a view constructor, that is, function inheritance is a static property.
  
      

      
var child; The/*this will become a subclass constructor, specifically shown in code as subview*/
  
      

      

  
      

      
if (Protoprops && _.has (Protoprops, ' constructor ')) {/* check if there is a replaceable constructor passed to extend ().
  
      

      
Child = Protoprops.constructor; /* If there is, then use it as a child constructor.
  
      

      
} else {
  
      

      
/* If not, create a function (that is, a child constructor) that can be passed to the argument of the view () constructor's constructor.
  
      

      
and set the text to the child constructor. This step duplicates the properties of the view constructor.
  
      

      

  
      

      
Child = function () {
  
      

      
Return parent.apply (this, arguments);
  
      

      
};
  
      

      
}
  
      

      
/* Add static parent class properties and any static properties for extend (), of course the parent class contains extend () itself,
  
      

      
therefore Subview () can now invoke extend () and sub constructs and can be used to continue/
  
      

      
_.extend (Child, parent, staticprops);
  
      

      

  
      

      
/* Let the prototype chain inherit the parent class (view in code), but do not call the parent class constructor
  
      

      
Basically, Thsi connects the parent class constructor (view in code) to the prototype chain between the child constructors.
  
      

      
var surrogate = function () {
  
      

      
This.constructor = child;
  
      

      
};
  
      

      
Surrogate.prototype = Parent.prototype;
  
      

      
Child.prototype = new Surrogate ();
  
      

      

  
      

      
/* Use if to add a prototype property to the child constructor, all instances of the child constructors will inherit these properties.
  
      

      
if (protoprops) {_.extend (Child.prototype, protoprops);}
  
      

      

  
      

      
/* The static property of the view.prototype*/constructor, pointing to the parent class prototype (
  
      

      
child.__super__ = Parent.prototype;
  
      

      

  
      

      
Return child;/* Returns the child constructor, all ready to be called to inherit the parent class.
  
      

      
};
  
      

      
/* Inherit view, create a child constructor based on the view constructor (that is, inherit the view constructor, make subview inherit view).
  
      

      
var Subview = View.extend ({
  
      

      
Protopropshere: ' Protoprops ',
  
      

      
Iam: ' Subview constructor ',
  
      

      
Initialize:function (Parameter1,parameter2) {//When Subview creates an instance, runs the initialization
  
      

      
Console.log (' Sub-constructor has been used, instance created ');
  
      

      
Console.log (' the ' + parameter1 + ' + parameter2 + ' have been passed ');
  
      

      
Console.log (' The value of this: ' + this. Iam + ', was correctly set ');
  
      

      
}
  
      

      
}, {
  
      

      
Staticepropertieshere: ' Staticproperties '
  
      

      
}
  
      

      

  
      

      
);
  
      

      

  
      

      
/* Verify static properties of Subview * *
  
      

      
Console.log (Subview.staticepropertieshere);
  
      

      

  
      

      
/* Create Subview instance, named MyView, to run initialization function pass option * *
  
      

      
var myview = new Subview (' param1 ', ' param2 ');
  
      

      

  
      

      
/* Verify the prototype properties of MyView * *
  
      

      
Console.log (Myview.protopropshere);
 
     
 
Understanding the concept of extend () and its role makes it possible to understand the principles of backbone applications. I suggest you test this section over and over again until you fully understand the function and role of extend () . If you want to skip this section quickly, I'll summarize this section as follows:
 

    

 
     
 
      
extend () can create or inherit new application-specific object properties so that inherited objects are instantiated and then have these new instance features and methods.
 
     

    
 
When the extended constructor is instantiated, run the initialization code
 
When using extend () to extend Backbone.model, backbone.collection, Backbone.view , and backbone.router an initialization function, You can set up an instance that is created at any time by an inherited constructor. Basically, the initialization function is a callback function that is invoked at any time when an instance is initialized. In the following code, I provide an initialization callback function for an inherited Backbone.model Constructor, and then create an instance that runs the initialization function sequentially (in backbone.collection, Backbone.view same as in Backbone.router ).
 
 
  
      

  
   
       
var MyModel = Backbone.Model.extend ({
  
   
       

  
   
       
To the instance object being created.*/
  
   
       

  
   
       
Log the properties in This/instance
  
   
       
Initialize:function () {
  
   
       
Console.log (_.keys (this));
  
   
       
Console.log (_.keys (This.constructor.prototype)); where ' ll find name
  
   
       
},
  
   
       
Name: ' MyModel '
  
   
       
});
  
   
       

  
   
       
Creates an instance that verifies that initialization is invoked
  
   
       
New MyModel;
 
  
      
 
Note that all parameters passed to the inherited constructor are also passed to the initialization callback function.
 
 
  
       

  
   
        
var MyModel = Backbone.Model.extend ({
  
   
        
Initialize:function (A,b,number) {Console.log (A,b,number)},//log paramaters
  
   
        
});
  
   
        
New MyModel ({A: ' A '},{b: ' B '},1); Passing properties, optional and random parameters
 
  
       
 
Tips:
 

      

 
       
 
        
The text of the initialization function (this) is set to the instance that is created.
 
        
When inheriting a backbone constructor, you should be aware of what parameters and what values the constructor needs when initializing an instance. For example, the first parameter that theBackbone.model constructor wants is the object (that is, the attribute) that contains the data in the model. The second parameter is the object that contains the initialization options. You can add additional parameters and simply pass to the initialization function.
 
       

      
 
Overloading inherited constructors
 
When using extend () , you pass a property called ' constructor ' as a value to a function, and the function is replaced with the property of the extend () . In the following code, I inherited not the Model constructor, but the constructor I passed.
 
 
  
        
 
   
         
var SubModel = Backbone.Model.extend ({
 
   
         
 Constructor:function () {//extend This constructor, not Model 
 
   
         
 This.foo = ' bar '; 
  
   
         
} 
 
   
         
}); 
  
   
         
  
  
   
         
mymodel = new Submodel (); 
  
   
         
  
  
   
         
console.log (Mymodel.foo);//log Bar 
  
   
         
  
  
   
         
/*cid an instance property set by the model constructor, but the log is not defined 
  
   
         
 
   
         
console.log (mymodel.cid); 
  
   
         
  
  The 
   
         
/*cid property is an instance property set by model () and we do not use model 
 
   
         
 We are using a custom constructor, so MyModel has no CID attribute */
 
  
        
 
 
In the following code,MyModel still inherits the Model () prototype property, rather than the instance attribute (CID). If you overload this constructor and want to preserve the instance properties of the constructor, you can call extend ()and you need to run the backbone.[in the custom constructor  Constructor].apply (this, arguments).
 
 
  
         

  
   
          
var submodel = Backbone.Model.extend ({
  
   
          
Constructor:function () {//Inherit this constructor, not model
  
   
          
This.goo = ' Boo ';
  
   
          
Backbone.Model.apply (this, arguments); Add Model Instance Property
  
   
          
}
  
   
          
});
  
   
          

  
   
          
MyModel = new Submodel ();
  
   
          

  
   
          
Console.log (Mymodel.goo); Log Boo
  
   
          
Console.log (MYMODEL.CID); Log C1, CID is a model instance property