Backbone 알기(3)
collection은 모델 대상의 질서정연한 조합이다. 우리는 집합에'change'이벤트를 연결하여 집합 중의 모델이 변할 때fetch(획득) 알림을 받을 수 있다. 집합은'add'와'remove'이벤트를 감청할 수 있고 서버에서 업데이트되며 Underscore를 사용할 수 있다.js가 제공하는 방법.
컬렉션 작성
//
var Book = Backbone.Model.extend({
defaults:{
title: 'backbone',
author: 'Jeremy Ashkenas'
}
})
var Books = Backbone.Collection.extend({
model: Book
})
var booklist = [
{title:'ios',author:'apple'},
{title:'android',author:'google'},
{title:'Windows Phone',author:'microsoft'}
]
//
var books = new Books(booklist)
//
books.each(function(book){
console.log( book.toJSON() )
//console.log(book.get('title') +' / '+ book.get('author'))
})
//
var Book = Backbone.Model.extend({
defaults:{
title: 'backbone',
author: 'Jeremy Ashkenas'
}
})
var booklist = [
{title:'ios',author:'apple'},
{title:'android',author:'google'},
{title:'Windows Phone',author:'microsoft'}
]
//
var books = new Backbone.Collection(booklist,{
model: Book
})
//
books.each(function(book){
console.log( book.toJSON() )
})
조작 집합
컬렉션에서 모델 제거하기
remove
collection.remove(models, [options])
집합에서 모델 (또는 모델 그룹) 을 삭제하고 되돌려줍니다."remove"이벤트를 터치합니다.silent로 닫을 수도 있습니다.이전에 이 모델의 index를 제거하면 옵션으로 사용할 수 있습니다.index 클래스 감청.pop
collection.pop([options])
집합의 마지막 모델을 삭제하고 되돌려줍니다.shift
collection.shift([options])
집합의 첫 번째 모델을 삭제하고 되돌려줍니다.var Book = Backbone.Model.extend({
defaults:{
title: 'backbone',
author: 'Jeremy Ashkenas'
}
})
var booklist = [
{title:'ios',author:'apple'},
{title:'android',author:'google'},
{title:'Windows Phone',author:'microsoft'}
]
var books = new Backbone.Collection(booklist,{
model: Book
})
books.shift() // 1
//books.remove(books.models[0])
books.pop() // 1
books.each(function(book){
console.log( book.toJSON() )
})
컬렉션에 모델 추가하기
add
collection.add(models, [options])
집합에 모델 (또는 모델 그룹) 을 추가하여 "dd"이벤트를 터치합니다.모델 속성을 정의했다면, 원시 속성의 대상을 통해 모델 실례처럼 보일 수도 있습니다.추가된 (또는 중복된 경우) 모드를 되돌려줍니다.전달 {at: index} 모형을 집합에 특정한 index 인덱스 위치에 삽입할 수 있습니다.집합에 존재하는 모델을 집합에 추가하려면 {merge:true}를 전달하지 않으면 속성이 해당 모델에 통합되어 적당한 "change"이벤트를 터치합니다.push
collection.push(model, [options])
컬렉션 끝에 모델을 추가합니다.unshift
collection.unshift(model, [options])
집합 머리에 모형을 추가합니다.var Book = Backbone.Model.extend({
defaults:{
title: 'backbone',
author: 'Jeremy Ashkenas'
}
})
var booklist = [
{title:'ios',author:'apple'},
{title:'android',author:'google'},
{title:'Windows Phone',author:'microsoft'}
]
var books = new Backbone.Collection(booklist,{
model: Book
})
books.add({title: 'Java', author: 'xxx'}) // 1
books.push({title: 'C++', author: 'ccc'}) // 1
books.unshift({title: 'PHP', author: 'ppp'}) // 1
books.each(function(book){
console.log( book.toJSON() )
})
컬렉션에서 모델 찾기
get
collection.get(id)
하나의 id, 하나의cid, 또는 모델을 전달해서 집합 중인 모델을 얻을 수 있습니다.at
collection.at(index)
집합에서 지정한 인덱스 모델을 얻습니다.모형을 다시 정렬했든지 말든지,at는 집합에 삽입되었을 때의 색인 값을 항상 되돌려줍니다.where
collection.where(attributes)
집합에서 전달된attributes (속성) 와 일치하는 모든 모델 그룹을 되돌려줍니다.간단한 필터에 유용합니다.findWhere
collection.findWhere(attributes)
where와 같이findWhere는 전달된attributes와 일치하는 첫 번째 모델을 직접 되돌려줍니다.var Book = Backbone.Model.extend({
defaults:{
code: 0,
title: 'backbone',
author: 'Jeremy Ashkenas'
},
idAttribute: 'code'
})
var booklist = [
{code:1,title:'ios',author:'apple'},
{code:2,title:'android',author:'google'},
{code:3,title:'Windows Phone',author:'microsoft'}
]
var books = new Backbone.Collection(booklist,{
model: Book
})
//books.at(2)
console.log( books.get(1).toJSON() ) //Object {code: 1, title: "ios", author: "apple"}
console.log( books.at(1).toJSON() ) //Object {code: 2, title: "android", author: "google"}
_.each( books.where({title:'Windows Phone'}),function(book){
console.log( book.toJSON() )
}) //Object {code: 3, title: "Windows Phone", author: "microsoft"}
console.log( books.findWhere({title:'Windows Phone'}).toJSON() ) //Object {code: 3, title: "Windows Phone", author: "microsoft"}
컬렉션에서 모델 정렬
sort
collection.sort([options])
집합을 강제로 정렬하다.일반적인 상황에서 이 함수를 호출할 필요가 없습니다. 왜냐하면 하나의 모델이 추가될 때comparator 함수는 실시간으로 정렬되기 때문입니다.모델을 추가할 때의 정렬을 사용하지 않으려면 {sort: false}를dd에 전달할 수 있습니다.sort가 촉발할 집합의 "sort"이벤트를 호출합니다.comparator
collection.comparator
기본적으로 집합은comparator 함수를 설명하지 않습니다.함수를 정의하면 컬렉션의 모델이 지정된 알고리즘에 따라 정렬됩니다.var Book = Backbone.Model.extend({
defaults:{
code: 0,
title: 'backbone',
author: 'Jeremy Ashkenas'
}
})
var booklist = [
{code:7,title:'ios',author:'apple'},
{code:5,title:'android',author:'google'},
{code:6,title:'Windows Phone',author:'microsoft'}
]
var books = new Backbone.Collection(booklist,{
model: Book,
comparator: function(a,b){
return a.get('code') > b.get('code') ? 1 : 0; //
//return a.get('code') > b.get('code') ? 0 : 1; //
}
})
books.sort()
books.each(function(book){
console.log( book.toJSON() )
})
// Object {code: 5, title: "android", author: "google"}
// Object {code: 6, title: "Windows Phone", author: "microsoft"}
// Object {code: 7, title: "ios", author: "apple"}
서버와 상호 작용
서버 데이터 가져오기
fetch
collection.fetch([options])
서버에서 집합의 기본 모델 설정을 끌어옵니다. 데이터를 성공적으로 수신한 후 setting (설정) 집합을 합니다.var Book = Backbone.Model.extend({
defaults:{
code: 0,
title: 'backbone',
author: 'Jeremy Ashkenas'
}
})
var Books = Backbone.Collection.extend({
url: 'backbone-test.php',
model: Book,
initialize: function(){
//reset
this.on('reset',function(render){
_.each(render.models,function(book){
console.log( book.toJSON() )
})
})
}
})
var books = new Books()
books.fetch({
reset: true,
success: function(collection, response){
_.each(collection.models,function(book){
console.log( book.toJSON() )
})
}
})
//php
$json = array(
array('code'=> 1,'title'=> 'ios','author'=>'apple'),
array('code'=> 2,'title'=> 'android','author'=>'android'),
array('code'=> 3,'title'=> 'windows phone','author'=>'microsoft')
);
echo json_encode($json);
서버 데이터 동기화
create
collection.create(attributes, [options])
집합에서 모델의 새로운 실례를 쉽게 만들 수 있습니다.속성 해시 (키 값 대상) 를 사용하여 모델을 실례화한 다음에 이 모델을 서버에 저장하고, 생성에 성공한 후에 모델을 집합에 추가하여 이 새 모델로 되돌아오는 것과 같다. var Book = Backbone.Model.extend({
defaults:{
code: 0,
title: 'backbone',
author: 'Jeremy Ashkenas'
}
})
var Books = Backbone.Collection.extend({
url: 'backbone-test.php',
model: Book,
initialize: function(){
this.on('add',function(model,response){
console.log( model.toJSON() ) //Object {title: "ios", author: "apple", code: 0}
})
}
})
var books = new Books()
books.create({title: "ios", author: "apple"})
//php
//
header('Content-Type: application/json; charset=utf-8');
//
$data = json_decode(file_get_contents("php://input"));
/* , */
//
echo json_encode(array('code'=>'2'));
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.