<html>
<head>
<title>backbone.js-Collection</title>
</head>
<body>
</body>
<script src="../../../node_modules/jquery-2.0.2.min.js"></script>
<script src="../../../node_modules/underscore-min.js"></script>
<script src="../../../node_modules/backbone-min.js"></script>
<script>
(function($){
Book = Backbone.Model.extend({
defaults:{
title:'dafaults'
},
initialize:function(){
alert('hey, you create a collection');
}
});
//collection是model的一个有序集合
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();
//bookShelf = new BookShelf([book1, book2, book3]);
bookShelf.add(book1);
bookShelf.add(book2);
bookShelf.add(book3);
//bookShelf.remove(book3);
//基于underscore.js这个库.可以同each来获得collection中的数据
bookShelf.each(function(book){
alert(book.get('title'));
});
/*
for(var i=0; i<bookShelf.models.length; i++) {
alert(bookShelf.models[i].get('title'));
}
*/
//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){
//渲染到页面
});
}
})(jQuery);
</script>
</html>
backbone>>collection
最新推荐文章于 2019-10-17 14:25:07 发布