您的位置：首页 > Web前端 > JavaScript

Backbone.js学习笔记——Collection篇

2013-07-24 16:56 120 查看

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

相关文章推荐

新的分享

章节导航