Backbone. Preliminary understanding

 

When developing a web application containing a large amount of JavaScript, one of the first things you need to do is to stop appending data to the DOM object. Using Complex and variable jquery delimiters and callback functions to create javascript applications, including html ui, JavaScript logic, and data synchronization, is not complex. However, for rich client applications, a good architecture usually has many benefits. Backbone presents the data as a model. You can create a model, verify and destroy the model, and even save it to the server. When the UI changes the model attributes, the model triggers "Change"Events. All views that display model data receive notifications of this event and re-render the view. You do not need to search for the specified dom IDTo manually update HTML. -When the model changes, the view automatically changes. Main components:1. Model: Create, verify, destroy, or save data to the server. Create a model: var student = backbone. model. Extend ({
Defaults :{//... Default model attributes
ID: 1,
Pkid: 0,
Name :'',
Age: 0
},
Urlroot: '/info' // ...... URL path strength to the background
}); 2. collection: You can add, delete, obtain length, sort, compare, and other tools and methods. To put it bluntly, a collection class that saves models creates several sets: var liststudent = backbone. collection. extend ({
Model: Student // ...... model is followed by the name of the model you want to save
}); Important method: 1. Fetch Method 　　　　

Pull the default model of the set from the server. After the data is received successfully, the set is reset (reset.OptionsSupportedSuccessAndErrorReceives callback functions.(Collection, response)As a parameter. Backbone. Sync can be delegated to handle Personalized Requirements later. ProcessingFetchThe requested server should returnJSONArray.

2. Save Method

By entrusting backbone. sync to save the model to the database (or an alternative persistent layer ).AttributesThe hash list (in set) should contain the attributes to be changed. Keys not involved are not modified. If the model contains the validate method and verification fails, the model is not saved. If the model isnew is saved"Create"(HTTPPost) Method. If the model already exists on the server,"Update"(HTTPPut) Method.

3destroy Method

By entrusting HTTPDeleteRequest to backbone. sync to destroy the model on the server. AcceptSuccessAndErrorThe callback function is used as an option hash parameter. Will be triggered on the Model"Destroy"Event, which can bubble up by any set containing it.

Example: add or delete HTML code for the table: <input type = "text"> <input type = "text">
<Button id = 'add'> Add </button>
<Table>
<Thead>
<Tr>
<TH> Number </Th>
<TH> name </Th>
<TH> age </Th>
<TH> operation </Th>
</Tr>
</Thead>
<Tbody id = "Main">
<Tr>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> <a href = "#"> Delete </a> </TD>
</Tr>
</Tbody>
</Table> JS Code:

<SCRIPT type = "text/JavaScript">

VaR studentm = backbone. model. Extend ({// create a model

Urlroot: '/info' // External Model of the set, by specifyingUrlrootTo generate the default URL function based on the model ID.

});

VaR list = backbone. collection. Extend ({// place the studentm model in the collection

Model: studentm,

URL: '/info '});//URLAttribute (or function) to specify the server location corresponding to the set. Model usage in the SetURLConstruct your own URLs

VaR stulist = new list ();

Function queryall () {// query

Stulist. Fetch ({success: function (M, R) {// fetch Method

VaR STR = "";

M. Each (function (I, n ){

STR + = "<tr> <TD>" + I. Get ("ID") +

"</TD> <TD>" + I. Get ("s_name") +

"</TD> <TD>" + I. Get ("s_age") +

"</TD> <a href = 'javascript: del (" + N + ") '> Delete </a> </TD> </tr> ";

});

Condition ('{main'{.html (STR );

}});}

Queryall ();

$ ('# Add'). On ('click', function (){

VaR inpuobj = $ ('input [type = text] ');

VaR finp = inpuobj [0]. value;

VaR sinp = inpuobj [1]. value;

VaR temp = new studentm ();

Temp. Save ({Name: finp, age: sinp}, {success: function () {// save Method

Queryall ();

}});});

/*** Delete */

Function del (I ){

Stulist. at (I). Destroy ({//......... Destroy Method

Success: function (){

Queryall ();

}); // The first request is sent, and the second is used to remove the self (object) in the Set );}

</SCRIPT>

Backbone. Preliminary understanding