Model for learning Backbone. js

Model for learning Backbone. js

 

 

First, let's take a look at the explanation (or definition) of the Model in the official document ):

Models are the heart of any JavaScript application, containing the interactive data as well as a large part of the logic surrounding it: conversions, validations, computed properties, and access control. you extend Backbone. model with your domain-specific methods, and Model provides a basic set of functionality for managing changes.

Translated into Chinese:

Model is the core of js applications, including interactive data and most of the logic around the data: Data conversion, verification, attribute calculation, and access control. You can use specific methods to expand Backbone. Model, and the Model itself provides a series of basic management functions.

Then, we can see in the document that the Model has many methods, so we will not introduce them here.

Simple Model example

Defines a basic Model, but implements the initialize initialization method. This function is called when the Model is instantiated.

var Man = Backbone.Model.extend({        constructor: function(){            alert('Hey, you create me!');        }         });        var man = new Man;

An initialization function can also be called a constructor. For example, you can write constructor as initialize, and the effect is the same. Why? You have to wait until you are familiar with this framework and check the Backbone source code.

Two Methods for assigning values to Molde Object Attributes

One is to set the default value.

Var Man = Backbone. Model. extend ({initialize: function () {alert ('Hey, you create me! ') ;}, Defaults: {name: 'zhang san', age: '38'}); var man = new Man; console.info (man. get (name ));

Or assign a value in this way.

    man.set({name:'the5fire',age:'10'});    console.info(man.get(name));    console.info(man);

You can see from the value method of this object that attributes exist in a Model in a dictionary (or similar dictionary). The first method is to set the default value, it only implements the defaults method of Backbone, or assigns a value to defaults. By printing out the man object, we can find that the attribute exists in an object named attributes.

Methods In the Model object

Var Man = Backbone. Model. extend ({initialize: function () {alert ('Hey, you create me! ') ;}, Defaults: {name: 'zhang san', age: '38'}, aboutMe: function () {return 'My name' + this. get ('name') + ', this year' + this. get ('age') + 'age' ;}}); var man = new Man; alert (man. aboutMe ());

It is also relatively simple, but a new attribute is added, and the value is a function. Speaking of this, I don't know if you have found that all definition or value assignment operations are done in dictionary mode, such as the extend Backbone Model and definition method, and the default value is defined. Methods are called in the same way as other languages..The Parameter definition and transmission are the same.

Listen to attribute changes in the Model object

If you want to process some services when a property of an object changes, the following example will help. The class is still defined. The difference is that we have bound the change event of the name attribute in the constructor. In this way, the function is triggered when the name changes.

Var Man = Backbone. Model. extend ({initialize: function () {alert ('Hey, you create me! '); // Bind to listen to this during initialization. bind (change: name, function () {var name = this. get (name); alert (you changed the name attribute to: + name) ;}) ;}, defaults: {name: 'zhang san', age: '38'}); var man = new Man; // triggers the bound change event, alert. Man. set ({name: 'the5fire'}); // triggers the bound change event, alert. Man. set ({name: 'the5fire. com '});

Add verification rules for Model objects and error messages

Var Man = Backbone. Model. extend ({initialize: function () {alert ('Hey, you create me! '); // Bind the listener during initialization. The change event will occur before validate this. bind (change: name, function () {var name = this. get (name); alert (you changed the name attribute to: + name) ;}); this. bind (invalid, function (model, error) {alert (error) ;}) ;}, defaults: {name: 'zhang san', age: '38'}, validate: function (attributes) {if (attributes. name = '') {return name cannot be blank !; }}}); Var man = new Man; // Add error handling in this way. // man. on ('invalid', function (model, error) {// alert (error); //}); // man verification is not performed when the default set is set. set ({name: ''}); // triggers verification when saving. Based on the verification rules, an error message is displayed. Man. save (); // manually trigger verification. man is triggered when set. set ({name: 'moyi'}, {'validate': true}); // if (man. isValid () {alert (man. get (name) + verification passed );}