Home > Developer > JavaScript
The Backbone view is used to display data in your model to the page. It can also be used to listen to DOM events and then respond.
First, we need to provide a general Page code. All the following test code should be put here:
[Html] <! DOCTYPE html>
<Html>
<Head>
<Title> the5fire-backbone-view </title>
</Head>
<Body>
<Div id = "search_container"> </div>
<Script type = "text/template" id = "search_template">
<Label> <% = search_label %> </label>
<Input type = "text" id = "search_input"/>
<Input type = "button" id = "search_button" value = "Search"/>
</Script>
</Body>
<Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"> </script>
<Script src = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </script>
<Script src = "http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"> </script>
<Script>
(Function ($ ){
// Add the following test code here
}) (JQuery );
</Script>
</Html>
<! DOCTYPE html>
<Html>
<Head>
<Title> the5fire-backbone-view </title>
</Head>
<Body>
<Div id = "search_container"> </div>
<Script type = "text/template" id = "search_template">
<Label> <% = search_label %> </label>
<Input type = "text" id = "search_input"/>
<Input type = "button" id = "search_button" value = "Search"/>
</Script>
</Body>
<Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"> </script>
<Script src = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </script>
<Script src = "http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"> </script>
<Script>
(Function ($ ){
// Add the following test code here
}) (JQuery );
</Script>
</Html>
1. A simple view
SearchView = Backbone. View. extend ({
Initialize: function (){
Alert ('init a searchview ');
}
});
Var searchView = new SearchView ();
Do you think there is no technical content, and all modules have the same definition.
2. el attributes
This attribute is used to reference some elements in the DOM. Each Backbone view has this attribute,
If no declaration is displayed, Backbone constructs an empty div element by default.
SearchView = Backbone. View. extend ({
Initialize: function (){
Alert ('init a searchview ');
}
});
Var searchView = new SearchView ({el: $ ("# search_container ")});
Next, let's look at this el application. First, pay attention to this label in the label. This is a template we have defined.
SearchView = Backbone. View. extend ({
Initialize: function (){
// This. render ();
},
Render: function (){
// Use the underscore library to compile the Template
Var template = _. template ($ ("# search_template" ).html (),{});
// Load the template to the corresponding el attribute
This.el.html (template );
}
});
Var searchView = new SearchView ({el: $ ("# search_container ")});
SearchView. render (); // The reander method can be placed in the view constructor.
After running the page, you will find that the html code in the script template has been added to our defined div.
3. Now let's look at the binding of element events in the DOM, which is very simple.
[Javascript] SearchView = Backbone. View. extend ({
Initialize: function (){
This. render ();
},
Render: function (){
// Use the underscore library to compile the Template
Var template = _. template ($ ("# search_template" ).html (),{});
// Load the template to the corresponding el attribute
This.el.html (template );
},
Events: {// bound here
'Click input [type = button] ': 'dosearch' // click event that defines the input tag of the button type to trigger the function doSearch
},
DoSearch: function (event ){
Alert ("search for" + $ ("# search_input"). val ());
}
});
Var searchView = new SearchView ({el: $ ("# search_container ")});
SearchView = Backbone. View. extend ({
Initialize: function (){
This. render ();
},
Render: function (){
// Use the underscore library to compile the Template
Var template = _. template ($ ("# search_template" ).html (),{});
// Load the template to the corresponding el attribute
This.el.html (template );
},
Events: {// bound here
'Click input [type = button] ': 'dosearch' // click event that defines the input tag of the button type to trigger the function doSearch
},
DoSearch: function (event ){
Alert ("search for" + $ ("# search_input"). val ());
}
});
Var searchView = new SearchView ({el: $ ("# search_container ")});
Run it on your own. Isn't it a simple answer? It looks much better than $ ("input [type = button]"). bind ('click', function.
4. templates in view
If you have used a django template, you should think that the template mentioned above has the same function as the django template. Since it is a template, you should be able to pass in data.
That's right. This is the same as django's use. You can define variables in the template and then pass them in the dictionary.
Note the changes in the script Template
[Javascript] SearchView = Backbone. View. extend ({
Initialize: function (){
This. render ();
},
Render: function (){
// Use the underscore library to compile the Template
Var template = _. template ($ ("# search_template" ).html (), {search_label: "the5fire search "});
// Load the template to the corresponding el attribute
This.el.html (template );
},
Events: {// bound here
'Click input [type = button] ': 'dosearch' // click event that defines the input tag of the button type to trigger the function doSearch
},
DoSearch: function (event ){
Alert ("search for" + $ ("# search_input"). val ());
}
});
Var searchView = new SearchView ({el: $ ("# search_container ")});
SearchView = Backbone. View. extend ({
Initialize: function (){
This. render ();
},
Render: function (){
// Use the underscore library to compile the Template
Var template = _. template ($ ("# search_template" ).html (), {search_label: "the5fire search "});
// Load the template to the corresponding el attribute
This.el.html (template );
},
Events: {// bound here
'Click input [type = button] ': 'dosearch' // click event that defines the input tag of the button type to trigger the function doSearch
},
DoSearch: function (event ){
Alert ("search for" + $ ("# search_input"). val ());
}
});
Var searchView = new SearchView ({el: $ ("# search_container ")});
Run it again. You may think this operation on dom is still very interesting.
Don't be excited. Let's scale it out again.
For practical applications, page data changes need to be synchronized to the server. The best way is to return the changed data and then modify the corresponding data on the page instead of refreshing the page.
[Javascript] SearchView = Backbone. View. extend ({
Initialize: function (){
This. render ('the5fire ');
},
Render: function (search_label ){
// Use the underscore library to compile the Template
Var template = _. template ($ ("# search_template" ).html (), {search_label: search_label });
// Load the template to the corresponding el attribute
This.el.html (template );
},
Events: {// bound here
'Click input [type = button] ': 'dochange'
},
DoChange: function (event ){
// Send data to the server through model
This. render ('the5fire' + $ ("# search_input"). val ());
}
});
Var searchView = new SearchView ({el: $ ("# search_container ")});
SearchView = Backbone. View. extend ({
Initialize: function (){
This. render ('the5fire ');
},
Render: function (search_label ){
// Use the underscore library to compile the Template
Var template = _. template ($ ("# search_template" ).html (), {search_label: search_label });
// Load the template to the corresponding el attribute
This.el.html (template );
},
Events: {// bound here
'Click input [type = button] ': 'dochange'
},
DoChange: function (event ){
// Send data to the server through model
This. render ('the5fire' + $ ("# search_input"). val ());
}
});
Var searchView = new SearchView ({el: $ ("# search_container ")});
This is a far-fetched example. However, if you add a model, the effect will be much better. The view and model can truly separate the business and data.
In short, the main application of view is to bind events, process services, and render pages.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
