Backbone.js学习笔记——Collection篇

最新推荐文章于 2025-12-12 00:08:49 发布

原创最新推荐文章于 2025-12-12 00:08:49 发布 · 854 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Backbone.js

本文介绍了Backbone.js中Collection的使用方法，包括如何创建模型和集合，如何添加和删除模型，以及如何通过事件监听集合的变化。通过示例代码展示了如何在网页上动态更新集合中的内容。

Collection 是backbone.js的一个重要组成部分。

学过java的朋友对于Collection 相当熟悉，已提到Collection 大家脑子里估计都是List ， Set， Map,等。不要怀疑你自己，我们backbone 的List有着异曲同工之妙。

首先看官网解释:

集合是model的有序组合，我们可以在集合上绑定"change" 事件，从而当集合中的模型发生变化时获得通知，集合也可以监听"add" 和“remove" 事件，从服务器更新，并能使用Underscore.js 提供的方法.

看下面例子

Book = Backbone.Model.extend({
defaults : {
name:null
}
});
Box = Backbone.Collection.extend({
model : Book //model = collection.model 指定集合的模型类。可以传入原始属性对象（和数组）来 add，create，以及 reset，传入的属性会被自动转换为适合的模型类型。

})
var bookyw = new Book({name:"语文"});
var booksx = new Book({name:"数学"});
var bookty = new Book({name:"体育"});

var box = new Box;
box.add(bookyw);
box.add(booksx);
box.add(bookty);
或者 var box = new Book([bookyw,booksx,bookty]);

<!DOCTYPE html>
<html>
<head>
    <title>Collection</title>
</head>
<body>
<p>Backbone Collection Example</p><hr>
<span id="animal_atr"></span>

	<label>我的书柜</label><br>
	<div  style="position:relative;width:30%;height:30%;border:1px solid blue">
		<ul id="mybooks">
		</ul>
	</div>
	<button id="remove">移除</button>
	<button id="add">增加</button><input id="addInput">
	
</body>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script>
(function ($) {
	var bookId = 1;
	Book = Backbone.Model.extend({
		defaults : { 
			id:bookId,	
			name:"新"
		}
	});
    Box = Backbone.Collection.extend({
		model : Book  
		
	})
	var bookyw = new Book({id:bookId++,	name:"语文"});

	var box = new Box;
	box.add(bookyw);

	box.each(function(book){
		$('#mybooks').append("<li ><input type='checkbox' tid='"+book.get('id') +"'>"+book.get('name') +"书</li>");
	});

	$('#remove').click(function(){
		$('input:checked').each(function(){
			var index = $(this).attr('tid');
			var bookx = box.get(index);
			box.remove(bookx);
		})
		reloadpage();
		
	})
	$('#add').click(function(){
		var name = $('#addInput').val();
		var bookx =  new Book({id:bookId++,name:name});
			box.add(bookx);
		reloadpage();
		
	})
	 var  reloadpage = function (){
		$('#mybooks').html('');
		box.each(function(book){
			$('#mybooks').append("<li ><input type='checkbox' tid='"+book.get('id') +"'>"+book.get('name') +"书</li>");
		});
	}
    
})(jQuery);
</script>
</html>

标签

#Backbone.js