Home > Developer > Web Develop
In front of our backbone.js used model, but in the case of a large number of cases we are dealing with a batch of model data list, so need to have a Collection to accommodate the model, just like the most used list in Java.
When declaring Collection, you need to specify the Model type that he handles, which is a generic parameter, as we define Collection:
// define Collection var Peoplecollection = Backbone.Collection.extend ({ //likegeneric});And then how to populate the Model instance in Collection, there are a lot of kinds, here is only the most direct way to demonstrate. Also add, fetch, and Collection sorts, traverse and other operations.
// Create Collection Instance var New peoplecollection ([ { ' Mohit Jain ', + }, { ' Taroon Tyagi ' , , }]);Pass the collection in when creating the View instance
var New Peopleview ({collection:peoplecollection});The template uses the dot operator to get the property, so when the template is presented with the data, call Collection's ToJSON () to the data, that is, the field from the attributes to the outer layer. In View, you need to bind the collection data in this way:
var This . Collection.tojson ()}; This // Fill in Data
The _.each () function is used in the template to traverse:
<%_.each (People,function(person) {%> <Li><%=Person.name%>,<%=Person.age%></Li> <% }); %>
This allows the data in the Collection to be displayed on the page, complete with the following examples:
<!DOCTYPE HTML><HTML> <Head> <Scriptsrc= "Http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></Script> <Scriptsrc= "Http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></Script> <Scriptsrc= "Http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></Script> </Head> <Body> <olID= "Container"></ol> <Scripttype= "Text/template"ID= "Person_template"> <%_.each (People,function(person) {%> <Li><%=Person.name%>, <%=Person.age%></li> <% }); %> </Script> </Body> </HTML> <Script> //define Model var Person=Backbone.Model.extend ({defaults: {name:'Unknown', Age: - } }); //define Collection varpeoplecollection=Backbone.Collection.extend ({Model:person//Like generic }); //define View varPeopleview=Backbone.View.extend ({el:'#container', Initialize:function(options) { This. render (); }, Render:function() { varTemplate=_.template ($ ("#person_template"). HTML ()); varData={people: This. Collection.tojson ()}; This. $el. HTML (template (data));//Fill in Data } }); //Create Collection Instance varpeoplecollection= Newpeoplecollection ([{name:'Mohit Jain', Age: at}, {name:'Taroon Tyagi', Age: -, } ]); //CREATE view and bind model varPeopleview= NewPeopleview ({collection:peoplecollection});</Script>
Click on the link http://fiddle.jshell.net/Unmi/NeNsU/run as above code, the page output is:
- Mohit Jain, 23
- Taroon Tyagi, 25
The above is a underscore template, which can be used separately in the page <% _.each ([0,1,2,3,4], function (i) {%> <p><%= i%></p> <%}) ; %> traversal array [0,1,2,3,4].
This article links http://unmi.cc/backbone-js-with-collection/, from Yehuang Unmi Blog
Backbone.js using Collection
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
