backbone.js의 컬렉션은 단순한 순서 세트 모델입니다. 모델 및 컬렉션에 적응하면 데이터 처리 로직이 뷰 계층에 배치되는 것을 피할 수 있습니다. 또한 모델과 컬렉션은 백엔드를 사용하는 편리한 방법을 제공하며 데이터가 변경되면 Backbone.js 뷰를 자동으로 표시 할 수 있습니다. 이러한 방식으로 다음과 같은 경우에 사용할 수 있습니다.
코드 사본은 다음과 같습니다.
모델 : 동물, 수집 : 동물원
일반적으로 세트는 하나의 모델에만 적합하지만 모델 자체는 세트의 유형에만 국한되지 않습니다.
코드 사본은 다음과 같습니다.
모델 : 사람, 컬렉션 : 사무실
모델 : 사람, 컬렉션 : 홈
다음은 일반적인 모델/세트의 예입니다.
코드 사본은 다음과 같습니다.
var music = backbone.model.extend ({
초기화 : function () {
Console.log ( "음악 세계에 오신 것을 환영합니다");
}
});
var 앨범 = backbone.collection.extend ({
모델 : 음악
});
위의 코드는 컬렉션을 만드는 방법을 알려줍니다. 그러나 데이터로 세트를 조작하는 프로세스를 알려주지 않습니다. 그래서이 과정을 살펴 보겠습니다.
코드 사본은 다음과 같습니다.
var music = backbone.model.extend ({
기본값 : {
이름 : "지정되지 않았다",
아티스트 : "지정되지 않은"
},
초기화 : function () {
Console.log ( "음악 세계에 오신 것을 환영합니다"); }
});
var 앨범 = backbone.collection.extend ({
모델 : 음악
});
var music1 = new Music ({id : 1, 이름 : "How hazarre", 아티스트 : "OMC"});
var music 2 = 새로운 음악 ({id : 2, 이름 : "가장 아프다", 아티스트 : "rascal flatts"});
var myalbum = 새 앨범 ([Music 1, Music 2]);
Console.log (myalbum.models);
backbone.js 컬렉션과 기타 구성 요소의 관계를 살펴 보겠습니다.
1. 컬렉션에 모델을 추가하십시오
우리가 알다시피, 세트는 모델 모음입니다. 따라서 컬렉션에 모델을 추가 할 수 있습니다. 컬렉션에 모델을 추가하기 위해 추가 메소드를 사용할 수 있습니다. Unshift 메소드를 사용하여 컬렉션의 시작에 모델을 추가 할 수도 있습니다.
코드 사본은 다음과 같습니다.
var music3 = new Music ({id : 3, name : "yes i do", 아티스트 : "rascal flatts"});
music.add (music3);
Console.log ( '새 노래 추가');
Console.log (json.stringify (music));
2. 세트에서 모델을 제거하십시오
여러 번, 우리는 수집에서 특정 데이터를 제거해야합니다. 컬렉션에서 모델을 제거하려면 모델의 ID를 제공해야합니다. 원래 컬렉션을 완전한 새 데이터 세트로 바꾸려면 재설정 방법을 사용할 수 있습니다.
코드 사본은 다음과 같습니다.
music.remove (1);
Console.log ( '기괴한 제거 방법 ...');
Console.log (json.stringify (music));
3. Get and Set
코드의 다른 곳에서 컬렉션에서 값을 가져와야하는 경우 Get 메소드를 직접 사용할 수 있습니다. 이 시점에서 검색과 함께 ID 값을 모델에 전달합니다.
코드 사본은 다음과 같습니다.
console.log (json.stringify (music.get (2)));
세트의 세트 방법에 대한 흥미로운 구현이 있습니다. SET 메소드는 모델 목록을 전달하여 컬렉션의 "지능형"업데이트를 수행합니다. 목록의 모델이 컬렉션에 있지 않으면 컬렉션에 추가됩니다. 모델이 이미 컬렉션에 있으면 속성이 병합됩니다. 컬렉션에 목록에 속하지 않은 모델이 포함되어 있으면 모델이 제거됩니다.
코드 사본은 다음과 같습니다.
var music = backbone.model.extend ({
//이 속성은 기본값으로 설정해야합니다
기본값 : {
이름: ''
},
// 컬렉션이되도록 ID 속성을 설정합니다
Idattribute : 'ID'
});
var song = backbone.collection.extend ({
모델 : 음악
});
var models = [{
이름 : 'OMC',
ID : 1
}, {
이름 : 'Flatts',
ID : 2
}];
var collection = 새로운 노래 (모델);
collection.bind ( 'add', function (model) {
경고 ( 'addb')
});
collection.bind ( 'remove', function () {
경고 ( '추가')
});
모델 = [{
이름 : 'OMC',
ID : 1
}, {
이름 : 'Flatts',
ID : 2
}, {
이름 : '잭슨',
ID : 3
}];
collection.add (모델);
});
위에서 보았 듯이, 우리는 이미 미리 2 개의 모델을 가지고 있었고, 세 번째 모델을 추가했을 때 이전 모델은 동일하게 유지되었습니다.
IV. 생성자 및 초기화
컬렉션을 만들 때 모델의 초기화 된 배열을 전달할 수 있습니다. 세트의 비교기를 옵션으로 추가 할 수 있습니다. 전달 된 비교기 옵션이 False 인 경우 정렬이 방지됩니다. 초기화 함수를 정의하면 컬렉션이 생성 될 때이 기능이 호출됩니다. 다음은 제공된 경우 몇 가지 옵션이 세트에 직접 추가됩니다 : 모델 및 비교기.
코드 사본은 다음과 같습니다.
var tabs = 새 tabset ([tab1, tab2, tab3]);
var 공간 = new backbone.collection ([], {
모델 : 공간
});
5. 토지슨
TOJSO 메소드는 각 모델 해시 속성이 포함 된 컬렉션의 배열을 반환합니다. 이 방법은 일반적으로 전체 세트를 직렬화하고 지속하는 데 사용됩니다.
코드 사본은 다음과 같습니다.
var song = new backbone.collection ([[
{이름 : "flatts"},
{이름 : "OMC"},
{이름 : "잭슨"}
]);
Alert (json.stringify (song));
6. 비교기
기본적으로 컬렉션에는 비교기가 없습니다. 비교기를 정의하면 세트를 어떤 종류로 유지하는 데 사용할 수 있습니다. 즉, 모델을 추가 할 때 모델이 컬렉션의 적절한 위치에 삽입됩니다. 비교기는 SortBy에서 정의 될 수 있거나 문자열의 정렬 된 속성을 나타냅니다.
SortBy 비교기 함수는 모델을 가져 와서 숫자 또는 문자열을 반환합니다.
정렬 비교 기능은 두 가지 모델을 얻습니다. 첫 번째 모델이 두 번째 모델보다 앞서 있으면 -1을 반환합니다. 두 모델이 같은 수준 인 경우 0을 반환합니다. 두 번째 모델이 첫 번째 모델보다 앞서 있으면 1을 반환합니다.
아래 예를 살펴 보겠습니다.
코드 사본은 다음과 같습니다.
var student = backbone.model;
var 학생 = 새로운 백본. 수집;
withy.comparator = 'name';
학생 .add (신입생 ({name : "name1", roll : 9}));
학생 .add (신입생 ({name : "name2", roll : 5}));
whity.add (신입생 ({name : "name3", roll : 1}));
Alert (학생 .Pluck ( 'Roll'));
모델의 속성을 수정하더라도 비교할 세트는 자동으로 재정렬되지 않습니다. 따라서 모델 속성을 수정 한 후 추정이 정렬에 영향을 미칠 때 정렬을 호출해야합니다.
7. 정렬
컬렉션에 모델을 추가 할 때 컬렉션을 재정렬해야합니다. 컬렉션 모델을 추가 할 때 정렬을 비활성화하려면 {sort : false} 매개 변수를 전달할 수 있습니다. 정렬 된 트리거를 호출하면이 매개 변수를 확인합니다.
코드 사본은 다음과 같습니다.
SortByType : 함수 (유형) {
this.sortkey = 유형;
this.sort ();
}
기능보기 :
코드 사본은 다음과 같습니다.
SortthingsByColumn : function (event) {
var type = event.currentTarget.classList [0]
this.collections.things.sortbytype (유형)
this.render ()
}
8. 따기
PLUCK : 컬렉션의 각 모델에서 하나의 속성을 선택하십시오.이 모델은 반복자에서 맵을 호출하고 단일 속성을 반환하는 것과 같습니다.
코드 사본은 다음과 같습니다.
var song = new backbone.collection ([[
{이름 : "flatts"},
{이름 : "OMC"},
{이름 : "잭슨"}
]);
var names = songs.pluck ( "이름");
Alert (json.stringify (이름));
9. 어디서
여기서 : 필터를 사용하여 전달 된 속성과 일치하는 컬렉션의 모델 배열을 반환합니다.
코드 사본은 다음과 같습니다.
var song = new backbone.collection ([[
{이름 : "Yes I Do", 아티스트 : "Flatts"},
{이름 : "How hawarre", 아티스트 : "How hazarre"},
{이름 : "가장 큰 상처", 아티스트 : "Flatts"},
]);
var artists = song.where ({아티스트 : "flatts"});
경고 (Artists.length);
10. URL
컬렉션에서 URL 속성을 설정하면 서버 위치를 나타냅니다. 컬렉션 내 모델은이 URL을 사용하여 자체 URL을 구성합니다.
코드 사본은 다음과 같습니다.
var songs = backbone.collection.extend ({
URL : '/songs'
});
var songs = backbone.collection.extend ({
URL : function () {
reture this.document.url () + '/songs';
}
});
11. 분석
구문 분석 : 서버가 컬렉션의 모델을 반환하는지 여부에 관계없이 가져올 때 백본으로 호출됩니다. 이 함수는 원래 응답 객체를 전달하여 컬렉션에 추가 된 다양한 모델 속성을 반환해야합니다. 기본 구현은 NO-OP 작업입니다. JSON 응답을 통해 간단한 전달, 기존 API 또는 더 나은 네임 스페이스 응답으로이를 덮어 씁니다.
코드 사본은 다음과 같습니다.
var songs = backbone.collection.extend ({
구문 분석 : 기능 (응답) {
반환 응답.
}
});
12. 추출
가져 오기 : 서버에서 컬렉션의 기본 모델 세트를 추출하고 검색 후 컬렉션에 설정하십시오. 이 옵션 HASH는 성공 또는 오류 콜백을 허용하며 세 가지 매개 변수 (세트, 응답, 옵션)를 전달합니다. 그런 다음 서버에서 모델 데이터를 반환하십시오. 병합 된 추출 모델을 설정하는 데 사용됩니다.
코드 사본은 다음과 같습니다.
backbone.sync = function (메소드, 모델) {
알림 (메소드 + ":" + model.url);
};
var songs = new backbone.collection;
songs.url = '/songs';
songs.fetch ();
위에서 볼 수 있듯이 코드의 품질을 향상시키기 위해 마스터하는 방법에는 여러 가지가 있습니다.