> 웹 프론트엔드 > JS 튜토리얼 > Backbone.js 프레임워크의 모델과 그 컬렉션에 대한 자세한 설명_기본 지식

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

WBOY
풀어 주다: 2016-05-16 15:02:13
원래의
1616명이 탐색했습니다.

모델이란
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!");

  }

});

 

//在实例化 Model 时直接设置

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

 

//我们也可以在 Model 实例化后,通过 set() 方法进行设置

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"); // 22

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

로그인 후 복사

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

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"); // 因为实例化时未指定 age 值,则为默认值 30

var name = person.get("name"); //实例化制定了 name 值,则为 "StephenLee"

로그인 후 복사

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

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");// 设置 StephenLee's hobby 为 coding

var hobby = person.get("hobby"); // "coding"

로그인 후 복사

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

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();

//注意,我们并没有在此定义 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 요청을 보냅니다.

1

2

3

4

5

6

7

8

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 요청을 보냅니다.

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'

});//实例化时指定 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로 보냅니다.

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'

});//实例化时指定 id 值

 

//因为指定了 id 值,此时使用 destroy() 方法,Backbone 将会向 user/1 发送 DELETE 请求,服务器端接收请求后,将会在数据库中删除 id 为 1的数据

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

//定义 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]

로그인 후 복사

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿