Backbone.js學習筆記——Collection篇

阿新 • • 發佈：2019-01-11

Collection 是backbone.js的一個重要組成部分。

學過java的朋友對於Collection 相當熟悉，已提到Collection 大家腦子裡估計都是List ， Set， Map,等。不要懷疑你自己，我們backbone 的List有著異曲同工之妙。

首先看官網解釋:

集合是model的有序組合，我們可以在集合上繫結"change" 事件，從而當集合中的模型發生變化時獲得通知，集合也可以監聽"add" 和“remove"

看下面例子

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學習筆記——Collection篇

Backbone.js學習筆記——Collection篇

JS學習筆記-CSS篇（二）

JS學習筆記-構造函數篇

vue.js學習筆記

Vue學習筆記入門篇——組件的內容分發(slot)

node.js學習筆記二之版本問題

js學習筆記23----窗口尺寸及窗口事件

js學習筆記25----Event對象

js學習筆記28----事件默認行為

vue+node.js學習筆記

js學習筆記

北風網-Vue.js 學習筆記

Three.js 學習筆記(1)--坐標體系和旋轉

vue.js學習筆記（Vuejs——組件——props數據傳遞）

Three.js學習筆記05

Spring Cloud學習筆記【篇一：分布式配置中心 Spring Colud Config】

Vue.js學習筆記總結1

js學習筆記01-函數,作用域,閉包

js學習筆記02-類和對象,繼承

js學習筆記04-ES6函數(箭頭函數與this),class

Backbone.js學習筆記——Collection篇

相關推薦