首頁 > 開發者 > JavaScript
collection是model對象的一個有序的集合，概念理解起來十分簡單，在通過幾個例子來看一下，會覺得更簡單。
1、關於book和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]); //注意這裡面是數組,或者使用add
var bookShelf = new BookShelf;
bookShelf.add(book1);
bookShelf.add(book2);
bookShelf.add(book3);
bookShelf.remove(book3);
//基於underscore這個js庫，還可以使用each的方法擷取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]); //注意這裡面是數組,或者使用add
var bookShelf = new BookShelf;
bookShelf.add(book1);
bookShelf.add(book2);
bookShelf.add(book3);
bookShelf.remove(book3);
//基於underscore這個js庫，還可以使用each的方法擷取collection中的資料
bookShelf.each(function(book){
alert(book.get('title'));
});
很簡單，不解釋
2、使用fetch從伺服器端擷取資料
首先要在上面的的Bookshelf中定義url，注意collection中並沒有urlRoot這個屬性。或者你直接在fetch方法中定義url的值，如下：
[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');
}});
其中也定義了兩個接受傳回值的方法，具體含義我想很容易理解，返回正確格式的資料，就會調用success方法，錯誤格式的資料就會調用error方法，當然error方法也看添加和success方法一樣的形參。
對應的BookShelf的返回格式如下：[{'title':'book1'},{'title':'book2'}.....]
3、reset方法
這個方法的時候是要和上面的fetch進行配合的，collection在fetch到資料之後，會調用reset方法，所以你需要在collection中定義reset方法或者是綁定reset方法。這裡使用綁定示範：
bookShelf.bind('reset',showAllBooks);
showAllBooks = function(){
bookShelf.each(function(book){
//將book資料渲染到頁面。
});
}
綁定的步驟要在fetch之前進行。
下面給出關於collection的完整代碼，需要伺服器端支援才行，伺服器端的搭建在後面會寫到。
[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是一個簡單的models的有序集合
//1、一個簡單的例子
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]); //注意這裡面是數組,或者使用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'));
}
*/
//基於underscore這個js庫，還可以使用each的方法擷取collection中的資料
bookShelf.each(function(book){
alert(book.get('title'));
});
//2、使用fetch從伺服器端擷取資料,使用reset渲染
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){
//將book資料渲染到頁面。
});
}
//上述代碼僅僅均為可正常執行的代碼，不過關於伺服器端的執行個體在後面會有。
})(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是一個簡單的models的有序集合
//1、一個簡單的例子
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]); //注意這裡面是數組,或者使用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'));
}
*/
//基於underscore這個js庫，還可以使用each的方法擷取collection中的資料
bookShelf.each(function(book){
alert(book.get('title'));
});
//2、使用fetch從伺服器端擷取資料,使用reset渲染
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){
//將book資料渲染到頁面。
});
}
//上述代碼僅僅均為可正常執行的代碼，不過關於伺服器端的執行個體在後面會有。
})(jQuery);
</script>
</html>
摘自 the_fire的技術部落格
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
