Backbone.js의 컬렉션은 단순한 주문형 세트 모델입니다. 모델과 컬렉션을 조정하면 뷰 레이어에 데이터 처리 논리를 배치하는 것을 피할 수 있습니다. 또한 모델과 컬렉션은 데이터가 변경될 때 Backbone.js 보기를 자동으로 표시하기 위해 백엔드와 작업하는 편리한 방법을 제공합니다. 이런 식으로 다음과 같은 상황에서 사용할 수 있습니다.
모델: 동물, 컬렉션: 동물원
일반적으로 컬렉션은 하나의 모델에만 적합하지만 모델 자체는 컬렉션 유형으로 제한되지 않습니다.
모델: 사람, 컬렉션: 사무실
모델: 사람, 컬렉션: 홈
다음은 일반적인 모델/컬렉션의 예입니다.
var Music = Backbone.Model.extend({
초기화: 함수(){
console.log("음악 세계에 오신 것을 환영합니다");
}
});
var 앨범 = Backbone.Collection.extend({
모델: 음악
});
위 코드는 컬렉션을 만드는 방법을 알려줍니다. 하지만 데이터로 컬렉션을 조작하는 과정은 알려주지 않습니다. 이제 프로세스를 살펴보겠습니다.
var Music = Backbone.Model.extend({
기본값: {
이름: "지정되지 않음",
아티스트: "지정되지 않음"
},
초기화: 함수(){
console.log("음악 세계에 오신 것을 환영합니다") }
});
var 앨범 = Backbone.Collection.extend({
모델: 음악
});
var music1 = 새 음악({ id: 1 , 이름: "How Bizarre", 아티스트: "OMC" });
var music 2 = 새 음악({id: 2, 이름: "What Hurts the Most", 아티스트: "Rascal Flatts" });
var myAlbum = 새 앨범([음악 1, 음악 2]);
console.log( myAlbum.models )
Backbone.js 컬렉션과 다른 구성 요소 간의 관계를 살펴보겠습니다.
1. 컬렉션에 모델 추가
아시다시피 컬렉션은 모델의 컬렉션입니다. 따라서 컬렉션에 모델을 추가할 수 있습니다. 컬렉션에 모델을 추가하려면 add 메소드를 사용할 수 있습니다. unshift 메소드를 사용하여 컬렉션의 시작 부분에 모델을 추가할 수도 있습니다.
var music3 = new Music({ id: 3, 이름: "Yes I Do", 아티스트: "Rascal Flatts" });
Music.add(music3);
console.log('신곡 추가');
console.log(JSON.stringify(음악));
2. 컬렉션에서 모델을 삭제합니다
컬렉션에서 지정된 일부 데이터를 제거해야 하는 경우가 많습니다. 컬렉션에서 모델을 제거하려면 모델의 ID를 제공해야 합니다. 원본 컬렉션을 완전히 새로운 데이터 세트로 교체하려면 재설정 방법을 사용할 수 있습니다.
Music.remove(1);
console.log('Bizarre가 어떻게 제거되었나요...');
console.log(JSON.stringify(음악));
3. 가져오고 설정
코드의 다른 곳에서 컬렉션에서 값을 가져와야 하는 경우 get 메서드를 직접 사용할 수 있습니다. 이 시점에서 검색을 통해 ID 값을 모델에 전달합니다.
console.log(JSON.stringify(Music.get(2)));
컬렉션의 set 메서드에는 흥미로운 구현이 있습니다. set 메소드는 모델 목록을 전달하여 컬렉션의 "지능형" 업데이트를 수행합니다. 목록의 모델이 아직 컬렉션에 없으면 컬렉션에 추가됩니다. 모델이 이미 컬렉션에 있으면 해당 속성이 병합됩니다. 컬렉션에 목록에 포함되지 않은 모델이 포함되어 있으면 해당 모델이 제거됩니다.
var Music = Backbone.Model.extend({
// 이 속성은 기본값으로 설정되어야 합니다
기본값: {
이름: ''
},
// 컬렉션이
idAttribute: 'id'
});
var 노래 = Backbone.Collection.extend({
모델: 음악
});
var 모델 = [{
이름: 'OMC',
ID: 1
}, {
이름: '플랫츠',
ID: 2
}];
var collection = 신곡(모델);
Collection.bind('추가', 함수(모델) {
경고('addb')
});
Collection.bind('제거', 함수 () {
경고('추가')
});
모델 = [{
이름: 'OMC',
ID:1
}, {
이름: '플랫츠',
ID: 2
}, {
이름: '잭슨',
ID: 3
}];
Collection.add(모델);
});
위에서 볼 수 있듯이 이전에는 이미 2개의 모델이 있었고 세 번째 모델을 추가했을 때 이전 모델은 변경되지 않았습니다.
4. 생성자와 초기화
컬렉션을 생성할 때 모델의 초기화 배열을 전달할 수 있습니다. 컬렉션 비교기를 옵션으로 추가할 수 있습니다. 전달된 비교기 옵션이 false이면 정렬이 금지됩니다. 초기화 함수를 정의하면 컬렉션이 생성될 때 이 함수가 호출됩니다. 아래에는 몇 가지 옵션이 설명되어 있으며, 제공되는 경우 모델 및 비교기 컬렉션에 직접 추가됩니다.
var tabs = new TabSet([tab1, tab2, tab3]);
var 공백 = 새로운 Backbone.Collection([], {
모델: 우주
});
5. JSON으로
toJSO 메서드는 컬렉션에 있는 각 모델의 해시 속성이 포함된 배열을 반환합니다. 이 방법은 일반적으로 전체 컬렉션을 직렬화하고 유지하는 데 사용됩니다.
var 노래 = 새로운 Backbone.Collection([
{이름: "Flatts"},
{이름: "OMC"},
{이름: "잭슨"}
]);
경고(JSON.stringify(노래));
6. 비교기
기본적으로 컬렉션에는 비교자가 없습니다. 비교기를 정의하면 컬렉션에서 특정 순서를 유지하는 데 사용할 수 있습니다. 이는 모델이 추가되면 컬렉션의 적절한 위치에 삽입된다는 의미입니다. 비교기는 sortBy 또는 정렬 속성을 나타내는 문자열을 사용하여 정의할 수 있습니다.
sortBy 비교기 함수는 모델을 가져오고 숫자나 문자열을 반환합니다.
정렬 비교기 함수는 두 모델을 가져옵니다. 첫 번째 모델이 두 번째 모델보다 앞에 있으면 -1을 반환하고, 두 번째 모델이 첫 번째 모델 앞에 있으면 0을 반환합니다. 하나의 모델이면 1이 반환됩니다.
예를 살펴보겠습니다.
var 학생 = Backbone.Model;
var 학생 = 새로운 Backbone.Collection;
Students.comparator = '이름';
Students.add(새 학생({이름: "name1", 롤: 9}));
Students.add(새 학생({이름: "name2", 롤: 5}));
Students.add(새 학생({이름: "name3", 롤: 1}));
Alert(students.pluck('roll'));
모델의 속성을 수정하더라도 비교기 컬렉션은 자동으로 재정렬되지 않습니다. 따라서 모델 속성을 수정한 후 정렬이 영향을 받을 것으로 예상할 때 정렬을 호출해야 합니다.
7.정렬
모델이 컬렉션에 추가되면 컬렉션을 강제로 재정렬해야 합니다. 컬렉션에 모델을 추가할 때 정렬을 비활성화하려면 {sort: false} 매개변수를 전달하세요. 정렬을 호출하는 트리거는 이 매개변수를 확인합니다.
sortByType: 함수(유형) {
this.sortKey = 유형;
this.sort();
}
기능 보기:
sortThingsByColumn: 함수(이벤트) {
var 유형 = event.currentTarget.classList[0]
this.collections.things.sortByType(유형)
this.render()
}
8. 따기
Pluck: 컬렉션의 각 모델에서 속성을 선택합니다. 이는 반복자에서 Map을 호출하고 단일 속성을 반환하는 것과 같습니다.
var 노래 = 새로운 Backbone.Collection([
{이름: "Flatts"},
{이름: "OMC"},
{이름: "잭슨"}
]);
var names = songs.pluck("name");
경고(JSON.stringify(이름));
9. 어디에
여기서: 필터를 사용하여 전달된 속성과 일치하는 컬렉션의 모든 모델 배열을 반환합니다.
var 노래 = 새로운 Backbone.Collection([
{이름: "Yes I Do", 아티스트: "Flatts"},
{이름: "How Bizarre", 아티스트: "How Bizarre"},
{이름: "가장 아픈 것", 아티스트: "Flatts"},
]);
var 아티스트 = song.where({아티스트: "Flatts"});
경고(아티스트.길이);
10. URL
서버 위치를 참조하는 URL 속성을 컬렉션에 설정하세요. 컬렉션 내의 모델은 이 URL을 사용하여 자체 URL을 구성합니다.
var Songs = Backbone.Collection.extend({
URL: '/노래'
});
var Songs = Backbone.Collection.extend({
URL: 함수() {
return this.document.url() '/songs';
}
});
11. 분석
Parse: 서버가 컬렉션의 모델을 반환하는지 여부에 관계없이 가져올 때 Backbone에 의해 호출됩니다. 이 함수는 원래 응답 개체에 전달되며 컬렉션에 추가된 모델 속성의 배열을 반환해야 합니다. 기본 구현은 no-op입니다. 간단히 JSON 응답을 전달하고, 기존 API로 이 작업을 재정의하거나, 응답에 네임스페이스를 지정하는 것이 더 좋습니다.
var songs = Backbone.Collection.extend({
구문 분석: 함수(응답) {
응답.결과 반환;
}
});
12. 추출
가져오기: 서버에서 컬렉션의 기본 모델 세트를 가져오고, 검색한 후 컬렉션에 설정합니다. 이 옵션 해시는 성공 또는 오류 콜백을 허용하고 세 가지 매개변수(컬렉션, 응답, 옵션)를 전달합니다. 그러면 모델 데이터가 서버에서 반환됩니다. 병합된 추출 모델을 설정하는 데 사용됩니다.
Backbone.sync = 함수(메서드, 모델) {
경고(메서드 ": " model.url);
};
var 노래 = 새로운 Backbone.Collection;
songs.url = '/songs';
songs.fetch();
위에서 볼 수 있듯이 Backbone 컬렉션에만 메소드가 너무 많고, 이를 마스터하면 코드 품질을 향상시킬 수 있습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
