Backbone 알기(3)

9533 단어
Backbone.컬렉션
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'));

좋은 웹페이지 즐겨찾기