모델이란
Backbone의 저자는 Model을 다음과 같이 정의합니다.
모델은 모든 웹 애플리케이션의 핵심이며 대화형 데이터와 대부분의 로직을 포함합니다. 예: 변환, 확인, 속성 및 액세스 권한 등
그럼 먼저 모델을 만들어 보겠습니다.
1 2 3 4 5 6 7 | Person = Backbone.Model.extend({
initialize: function (){
alert( "Welcome to Backbone!" );
}
});
var person = new Person;
|
로그인 후 복사
위 코드에서는 Person이라는 모델을 정의하고 인스턴스화 후에 person을 얻습니다. Model을 인스턴스화할 때마다 초기화() 메서드가 자동으로 트리거됩니다(이 원칙은 컬렉션 및 뷰에도 적용됩니다). 물론 Model을 정의할 때 초기화() 메소드를 반드시 사용하는 것은 아니지만, Backbone을 사용해보면 필수라는 것을 알게 될 것이다.
모델 속성 설정
이제 모델 인스턴스를 생성할 때 모델의 속성을 설정하기 위해 몇 가지 매개변수를 전달하려고 합니다.
1 2 3 4 5 6 7 8 9 10 11 12 | Person = Backbone.Model.extend({
initialize: function (){
alert( "Welcome to Backbone!" );
}
});
var person = new Person({ name: "StephenLee" , age: 22 });
var person = new Person();
person.set({ name: "StephenLee" , age: 22});
|
로그인 후 복사
모델 속성 가져오기
모델의 get() 메소드를 사용하여 속성을 가져올 수 있습니다.
1 2 3 4 5 6 7 8 9 10 | Person = Backbone.Model.extend({
initialize: function (){
alert( "Welcome to Backbone!" );
}
});
var person = new Person({ name: "StephenLee" , age: 22});
var age = person.get( "age" );
var name = person.get( "name" );
|
로그인 후 복사
모델 기본 속성 설정
모델이 인스턴스화될 때 일부 기본 속성 값을 포함하기를 원하는 경우는 모델의 기본 속성을 정의하여 달성할 수 있습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | Person = Backbone.Model.extend({
defaults: {
name: "LebronJames" ,
age: 30,
},
initialize: function (){
alert( "Welcome to Backbone!" );
}
});
var person = new Person({ name: "StephenLee" });
var age = person.get( "age" );
var name = person.get( "name" );
|
로그인 후 복사
모델 속성 사용
모델의 속성을 사용하도록 모델의 메서드를 사용자 정의할 수 있습니다. (모든 사용자 정의 방법은 기본적으로 공개됩니다.)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | Person = Backbone.Model.extend({
defaults: {
name: "LebronJames" ,
age: 30,
hobby: "basketball"
},
initialize: function (){
alert( "Welcome to Backbone!" );
},
like: function ( hobbyName ){
this .set({ hobby: hobbyName });
},
});
var person = new Person({ name: "StephenLee" , age: 22});
person.like( "coding" );
var hobby = person.get( "hobby" );
|
로그인 후 복사
모델 속성 변경 사항 듣기
Backbone의 메커니즘에 따라 모델의 모든 속성을 모니터링할 수 있습니다. 다음으로 속성 이름을 예로 들어 초기화() 메서드에서 모델의 속성을 바인딩하려고 합니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | Person = Backbone.Model.extend({
defaults: {
name: "LebronJames" ,
age: 30,
},
initialize: function (){
alert( "Welcome to Backbone!" );
this .on( "change:name" , function (model){
var name = model.get( "name" );
alert( "Changed my name to " + name );
});
}
});
var person = new Person();
var age = person.set({name : "KobeBryant" });
|
로그인 후 복사
위 코드를 통해 모델의 특정 속성을 모니터링하는 방법을 알 수 있습니다. 모델의 모든 속성을 모니터링해야 한다고 가정하고 'this.on("change", function(model){});
서버와 모델 간의 데이터 상호작용
이전 기사에서 언급했듯이 모델에는 대화형 데이터가 포함되어 있으므로 모델의 기능 중 하나는 서버에서 데이터를 전달하고 서버와 상호 작용하는 것입니다. 이제 서버 측에 mysql 테이블 사용자가 있다고 가정합니다. 테이블에는 id, name 및 email 세 개의 필드가 있습니다. 서버 측은 REST 스타일을 사용하여 URL: /user를 사용하여 프런트 엔드와 통신합니다. 우리 모델은 다음과 같이 정의됩니다.
1 2 3 4 5 6 7 | var UserModel = Backbone.Model.extend({
urlRoot: '/user' ,
defaults: {
name: '' ,
email: ''
}
});
|
로그인 후 복사
모델 만들기
Backbone의 각 모델에는 서버 측 데이터에 일대일로 대응하는 속성 ID가 있습니다. 서버 측의 mysql 테이블 사용자에게 새 레코드를 추가하려면 모델을 인스턴스화한 다음 save() 메소드를 호출하기만 하면 됩니다. 이때 Model 인스턴스의 attribute id가 비어 있다는 것은 Model이 새로 생성되었음을 의미하므로 Backbone은 지정된 URL로 POST 요청을 보낸다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | var UserModel = Backbone.Model.extend({
urlRoot: '/user' ,
defaults: {
name: '' ,
email: ''
}
});
var user = new Usermodel();
var userDetails = {
name: 'StephenLee' ,
email: 'stephen.lee@mencoplatform.com'
};
user.save(userDetails, {
success: function (user) {
alert(user.toJSON());
}
})
|
로그인 후 복사
이때, 서버측 mysql의 user 테이블에 이름이 StephenLee이고 이메일 stephen.lee@mencoplatform.com인 추가 기록이 있습니다.
모델 구하기
방금 모델을 생성하여 서버측 데이터베이스에 저장했습니다. 모델 생성 시 서버에서 반환한 id 속성 값이 1이라고 가정합니다. 이때 id 값을 사용하여 저장할 수 있습니다. 데이터 검색. id 속성 값으로 Model 인스턴스를 초기화하면 Backbone은 fetch() 작업을 통해 지정된 URL로 GET 요청을 보냅니다.
1 2 3 4 5 6 7 8 | var user = new Usermodel({id: 1});
user.fetch({
success: function (user) {
alert(user.toJSON());
}
})
|
로그인 후 복사
모델 업데이트
저장된 사용자 레코드를 수정하고 알려진 id 값을 사용해야 하는 경우 save() 메서드도 사용하지만 이때 id가 비어 있지 않기 때문에 Backbone은 지정된 URL로 PUT 요청을 보냅니다.
1 2 3 4 5 6 7 8 9 10 11 12 | var user = new Usermodel({
id: 1,
name: 'StephenLee' ,
email: 'stephen.lee@mencoplatform.com'
});
user.save({email: 'newemail@qq.com' }, {
success: function (model) {
alert(user.toJSON());
}
});
|
로그인 후 복사
모델 삭제
데이터베이스에서 레코드를 삭제해야 하는 경우 알려진 id 값을 사용하여 destroy() 메소드를 사용하세요. 이 시점에서 Backbone은 DELETE 작업을 지정된 URL로 보냅니다.
1 2 3 4 5 6 7 8 9 10 11 12 | var user = new Usermodel({
id: 1,
name: 'StephenLee' ,
email: 'stephen.lee@mencoplatform.com'
});
user.destroy({
success: function () {
alert( 'Destroyed' );
}
});
|
로그인 후 복사
컬렉션이란
간단히 말하면 Collection in Backbone은 주문된 모델 컬렉션입니다. 예를 들어 다음과 같은 상황에서 사용할 수 있습니다.
1 2 3 | Model: Student, Collection: ClassStudents
Model: Todo Item, Collection: Todo List
Model: Animal, Collection: Zoo
|
로그인 후 복사
컬렉션은 일반적으로 동일한 유형의 모델만 사용하지만 모델은 다음과 같은 다양한 유형의 컬렉션에 속할 수 있습니다.
1 2 3 | Model: Student, Collection: Gym Class
Model: Student, Collection: Art Class
Model: Student, Collection: English Class
|
로그인 후 복사
컬렉션 만들기
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | var Song = Backbone.Model.extend({
defaults: {
name: "Not specified" ,
artist: "Not specified"
},
initialize: function (){
console.log( "Music is the answer" );
}
});
var Album = Backbone.Collection.extend({
model: Song
});
var song1 = new Song({ name: "How Bizarre" , artist: "OMC" });
var song2 = new Song({ name: "Sexual Healing" , artist: "Marvin Gaye" });
var song3 = new Song({ name: "Talk It Over In Bed" , artist: "OMC" });
var myAlbum = new Album([ song1, song2, song3]);
console.log( myAlbum.models );
|
로그인 후 복사