Home > Developer > JavaScript
Collection is an ordered set of model objects. It is easy to understand the concept. It is easier to look at several examples.
1. Example of book and bookshelf
[Javascript] Book = Backbone. Model. extend ({
Default :{
Title: 'default'
},
Initialize: function (){
// Alert ('Hey, you create me! ');
}
});
BookShelf = Backbone. Collection. extend ({
Model: Book
});
Var book1 = new Book ({title: 'book1 '});
Var book2 = new Book ({title: 'book2 '});
Var book3 = new Book ({title: 'book3 '});
// Var bookShelf = new BookShelf ([book1, book2, book3]); // note that this is an array or use add
Var bookShelf = new BookShelf;
BookShelf. add (book1 );
BookShelf. add (book2 );
BookShelf. add (book3 );
BookShelf. remove (book3 );
// Based on the js library underscore, you can also use the each method to obtain data in the collection.
BookShelf. each (function (book ){
Alert (book. get ('title '));
});
Book = Backbone. Model. extend ({
Default :{
Title: 'default'
},
Initialize: function (){
// Alert ('Hey, you create me! ');
}
});
BookShelf = Backbone. Collection. extend ({
Model: Book
});
Var book1 = new Book ({title: 'book1 '});
Var book2 = new Book ({title: 'book2 '});
Var book3 = new Book ({title: 'book3 '});
// Var bookShelf = new BookShelf ([book1, book2, book3]); // note that this is an array or use add
Var bookShelf = new BookShelf;
BookShelf. add (book1 );
BookShelf. add (book2 );
BookShelf. add (book3 );
BookShelf. remove (book3 );
// Based on the js library underscore, you can also use the each method to obtain data in the collection.
BookShelf. each (function (book ){
Alert (book. get ('title '));
});
Simple, not explained
2. Use fetch to obtain data from the server
First, define the url in the Bookshelf above. Note that the url root attribute is not found in the collection. Or you can define the url value in the fetch method as follows:
[Javascript] bookShelf. fetch ({url: '/getbooks/', success: function (collection, response ){
Collection. each (function (book ){
Alert (book. get ('title '));
});
}, Error: function (){
Alert ('error ');
}});
BookShelf. fetch ({url: '/getbooks/', success: function (collection, response ){
Collection. each (function (book ){
Alert (book. get ('title '));
});
}, Error: function (){
Alert ('error ');
}});
Two methods to accept the returned value are also defined. I think it is easy to understand the specific meaning. When the data in the correct format is returned, the success method is called, and the error method is called for the data in the error format, of course, the error method also depends on adding the same parameters as the success method.
The returned format of the corresponding BookShelf is as follows: [{'title': 'book1'}, {'title': 'book2'} ......]
3. reset Method
This method must be used with the above fetch. After fetch is sent to the data, the collection will call the reset method. Therefore, you need to define the reset method in the collection or bind the reset method. Here, the binding demonstration is used:
BookShelf. bind ('reset', showAllBooks );
ShowAllBooks = function (){
BookShelf. each (function (book ){
// Render the book data to the page.
});
}
The binding process must be performed before fetch.
The complete collection code is provided below, which must be supported by the server. The server will be written later.
[Javascript] <! DOCTYPE html>
<Html>
<Head>
<Title> the5fire-backbone-collection </title>
</Head>
<Body>
</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 ($ ){
// Collection is a simple ordered set of models.
// 1. A simple example
Book = Backbone. Model. extend ({
Default :{
Title: 'default'
},
Initialize: function (){
// Alert ('Hey, you create me! ');
}
});
BookShelf = Backbone. Collection. extend ({
Model: Book
});
Var book1 = new Book ({title: 'book1 '});
Var book2 = new Book ({title: 'book2 '});
Var book3 = new Book ({title: 'book3 '});
// Var bookShelf = new BookShelf ([book1, book2, book3]); // note that this is an array or use add
Var bookShelf = new BookShelf;
BookShelf. add (book1 );
BookShelf. add (book2 );
BookShelf. add (book3 );
BookShelf. remove (book3 );
/*
For (var I = 0; I <bookShelf. models. length; I ++ ){
Alert (bookShelf. models [I]. get ('title '));
}
*/
// Based on the js library underscore, you can also use the each method to obtain data in the collection.
BookShelf. each (function (book ){
Alert (book. get ('title '));
});
// 2. Use fetch to obtain data from the server and use reset Rendering
BookShelf. bind ('reset', showAllBooks );
BookShelf. fetch ({url: '/getbooks/', success: function (collection, response ){
Collection. each (function (book ){
Alert (book. get ('title '));
});
}, Error: function (){
Alert ('error ');
}});
ShowAllBooks = function (){
BookShelf. each (function (book ){
// Render the book data to the page.
});
}
// The above code is only code that can be normally executed, but the server-side instance will be available later.
}) (JQuery );
</Script>
</Html>
<! DOCTYPE html>
<Html>
<Head>
<Title> the5fire-backbone-collection </title>
</Head>
<Body>
</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 ($ ){
// Collection is a simple ordered set of models.
// 1. A simple example
Book = Backbone. Model. extend ({
Default :{
Title: 'default'
},
Initialize: function (){
// Alert ('Hey, you create me! ');
}
});
BookShelf = Backbone. Collection. extend ({
Model: Book
});
Var book1 = new Book ({title: 'book1 '});
Var book2 = new Book ({title: 'book2 '});
Var book3 = new Book ({title: 'book3 '});
// Var bookShelf = new BookShelf ([book1, book2, book3]); // note that this is an array or use add
Var bookShelf = new BookShelf;
BookShelf. add (book1 );
BookShelf. add (book2 );
BookShelf. add (book3 );
BookShelf. remove (book3 );
/*
For (var I = 0; I <bookShelf. models. length; I ++ ){
Alert (bookShelf. models [I]. get ('title '));
}
*/
// Based on the js library underscore, you can also use the each method to obtain data in the collection.
BookShelf. each (function (book ){
Alert (book. get ('title '));
});
// 2. Use fetch to obtain data from the server and use reset Rendering
BookShelf. bind ('reset', showAllBooks );
BookShelf. fetch ({url: '/getbooks/', success: function (collection, response ){
Collection. each (function (book ){
Alert (book. get ('title '));
});
}, Error: function (){
Alert ('error ');
}});
ShowAllBooks = function (){
BookShelf. each (function (book ){
// Render the book data to the page.
});
}
// The above code is only code that can be normally executed, but the server-side instance will be available later.
}) (JQuery );
</Script>
</Html>
From the_fire's technical blog
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
