Backbone.js 프레임워크의 모델과 그 컬렉션에 대한 자세한 설명_기본 지식

모델이란
Backbone의 저자는 Model을 다음과 같이 정의합니다.

모델은 모든 웹 애플리케이션의 핵심이며 대화형 데이터와 대부분의 로직을 포함합니다. 예: 변환, 확인, 속성 및 액세스 권한 등
그럼 먼저 모델을 만들어 보겠습니다.

Person = Backbone.Model.extend({
  initialize: function(){
    alert("Welcome to Backbone!");
  }
});

var person = new Person;

위 코드에서는 Person이라는 모델을 정의하고 인스턴스화 후에 person을 얻습니다. Model을 인스턴스화할 때마다 초기화() 메서드가 자동으로 트리거됩니다(이 원칙은 컬렉션 및 뷰에도 적용됩니다). 물론 Model을 정의할 때 초기화() 메소드를 반드시 사용하는 것은 아니지만, Backbone을 사용해보면 필수라는 것을 알게 될 것이다.

모델 속성 설정
이제 모델 인스턴스를 생성할 때 모델의 속성을 설정하기 위해 몇 가지 매개변수를 전달하려고 합니다.

Person = Backbone.Model.extend({
  initialize: function(){
    alert("Welcome to Backbone!");
  }
});

//在实例化 Model 时直接设置
var person = new Person({ name: "StephenLee", age: 22 });

//我们也可以在 Model 实例化后，通过 set() 方法进行设置
var person = new Person();
person.set({ name: "StephenLee", age: 22});

모델 속성 가져오기
모델의 get() 메소드를 사용하여 속성을 가져올 수 있습니다.

Person = Backbone.Model.extend({
  initialize: function(){
    alert("Welcome to Backbone!");
  }
});

var person = new Person({ name: "StephenLee", age: 22});

var age = person.get("age"); // 22
var name = person.get("name"); // "StephenLee"

모델 기본 속성 설정
모델이 인스턴스화될 때 일부 기본 속성 값을 포함하기를 원하는 경우는 모델의 기본 속성을 정의하여 달성할 수 있습니다.

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"); // 因为实例化时未指定 age 值，则为默认值 30
var name = person.get("name"); //实例化制定了 name 值，则为 "StephenLee"

모델 속성 사용
모델의 속성을 사용하도록 모델의 메서드를 사용자 정의할 수 있습니다. (모든 사용자 정의 방법은 기본적으로 공개됩니다.)

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");// 设置 StephenLee's hobby 为 coding
var hobby = person.get("hobby"); // "coding"

모델 속성 변경 사항 듣기
Backbone의 메커니즘에 따라 모델의 모든 속성을 모니터링할 수 있습니다. 다음으로 속성 이름을 예로 들어 초기화() 메서드에서 모델의 속성을 바인딩하려고 합니다.

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"); // 'KobeBryant'
      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를 사용하여 프런트 엔드와 통신합니다. 우리 모델은 다음과 같이 정의됩니다.

var UserModel = Backbone.Model.extend({
  urlRoot: '/user',
  defaults: {
    name: '',
    email: ''
  }
});

모델 만들기
Backbone의 각 모델에는 서버 측 데이터에 일대일로 대응하는 속성 ID가 있습니다. 서버 측의 mysql 테이블 사용자에게 새 레코드를 추가하려면 모델을 인스턴스화한 다음 save() 메소드를 호출하기만 하면 됩니다. 이때 Model 인스턴스의 attribute id가 비어 있다는 것은 Model이 새로 생성되었음을 의미하므로 Backbone은 지정된 URL로 POST 요청을 보낸다.

var UserModel = Backbone.Model.extend({
  urlRoot: '/user',
  defaults: {
    name: '',
    email: ''
  }
});

var user = new Usermodel();
//注意，我们并没有在此定义 id 属性
var userDetails = {
  name: 'StephenLee',
  email: 'stephen.lee@mencoplatform.com'
};

//因为 model 没有 id 属性，所以此时使用 save() 方法，Backbone 会向服务器端发送一个 POST 请求，服务器端收到数据后，将其存储，并返回包含 id 的信息给 Model
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 요청을 보냅니다.

var user = new Usermodel({id: 1});//初始化时指定 id 的值

//利用 fetch() 方法将会向 user/1 请求数据，服务器端将会返回完整的 user 记录，包含 name,email 等信息
user.fetch({
  success: function (user) {
    alert(user.toJSON());
  }
})

모델 업데이트
저장된 사용자 레코드를 수정하고 알려진 id 값을 사용해야 하는 경우 save() 메서드도 사용하지만 이때 id가 비어 있지 않기 때문에 Backbone은 지정된 URL로 PUT 요청을 보냅니다.

var user = new Usermodel({
  id: 1,
  name: 'StephenLee',
  email: 'stephen.lee@mencoplatform.com'
});//实例化时指定 id 值

//因为指定了 id 值，此时使用 save() 方法，Backbone 将会向 user/1 发送 PUT 请求，将会对数据库中 id 为1的记录的 email 修改
user.save({email: 'newemail@qq.com'}, {
  success: function (model) {
    alert(user.toJSON());
  }
});

모델 삭제
데이터베이스에서 레코드를 삭제해야 하는 경우 알려진 id 값을 사용하여 destroy() 메소드를 사용하세요. 이 시점에서 Backbone은 DELETE 작업을 지정된 URL로 보냅니다.

var user = new Usermodel({
  id: 1,
  name: 'StephenLee',
  email: 'stephen.lee@mencoplatform.com'
});//实例化时指定 id 值

//因为指定了 id 值，此时使用 destroy() 方法，Backbone 将会向 user/1 发送 DELETE 请求，服务器端接收请求后，将会在数据库中删除 id 为 1的数据
user.destroy({
  success: function () {
    alert('Destroyed');
  }
});

컬렉션이란
간단히 말하면 Collection in Backbone은 주문된 모델 컬렉션입니다. 예를 들어 다음과 같은 상황에서 사용할 수 있습니다.

Model: Student, Collection: ClassStudents
Model: Todo Item, Collection: Todo List
Model: Animal, Collection: Zoo

컬렉션은 일반적으로 동일한 유형의 모델만 사용하지만 모델은 다음과 같은 다양한 유형의 컬렉션에 속할 수 있습니다.

Model: Student, Collection: Gym Class
Model: Student, Collection: Art Class
Model: Student, Collection: English Class

컬렉션 만들기

//定义 Model Song
var Song = Backbone.Model.extend({
  defaults: {
    name: "Not specified",
    artist: "Not specified"
  },
  initialize: function(){
    console.log("Music is the answer");
  }
});

//定义 Collection Album
var Album = Backbone.Collection.extend({
  model: Song //指定 Collection 内的 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 ); // 输出为 [song1, song2, song3]