[Script] Backbone.js Tutorial ( 기초 강좌 ) - Model

출처 :  http://backbonetutorials.com/what-is-a-model/

[Script] Backbone.js 란?

Backbone.js 를 한마디로 하면?

- Backbone.js 는 기능성과 구조를 잡는것을 도와주는 작은 JavaScript 라이브러리이다.

- MVC 모델을 따른다. 

What is model?

- Backbone.js 에서 말하는 Model 은 Conversion, Validation, Computation, Access control 을 하는 interactive data.

 Person = Backbone.Model.extend({

         initialize: function(){

             alert("Welcome to this world");

         }

     });

 var person = new Person;

- initialize() 함수는 Model 이 create 되는 순간 기본으로 불린다. ( View, Collection 도 마찬가지로 생성당시 initialize 가 불린다. )

Setting Attributes

Person = Backbone.Model.extend({

     initialize: function(){

        alert("Welcome to this world");

     }

});

var person = new Person({ name: "Thomas", age: 67});

// or we can set afterwards, these operations are equivelent

var person = new Person();

person.set({ name: "Thomas", age: 67});    

- 생성자에 JSON 으로 전달해도 되고, built-in function 인 "set" 을 통해 JSON 을 전달할 수도 있다.

Getting Attributes

 Person = Backbone.Model.extend({

         initialize: function(){

             alert("Welcome to this world");

         }

     });        

var person = new Person({ name: "Thomas", age: 67, children: ['Ryan']});   var age = person.get("age"); // 67    

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

var children = person.get("children"); // ['Ryan']

- built-in function "get" 을 통해서 attribute 에 접근할 수 있다.

Setting Model Defaults

    Person = Backbone.Model.extend({

         defaults: {

             name: 'Fetus',

             age: 0,

             children: []

         },

         initialize: function(){

             alert("Welcome to this world");

         }

     });

     var person = new Person({ name: "Thomas", age: 67, children: ['Ryan']});        

     var age = person.get("age"); // 67

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

     var children = person.get("children"); // ['Ryan']

- defaults 를 정의함으로서, 초기값을 assign 할 수 있다.

Manipulating Model Attributes

 Person = Backbone.Model.extend({

         defaults: {

             name: 'Fetus',

             age: 0,

             children: []

         },

         initialize: function(){

             alert("Welcome to this world");

         },

         adopt: function( newChildsName ){

             var children_array = this.get("children");

             children_array.push( newChildsName );

             this.set({ children: children_array });

         }

     });        

var person = new Person({ name: "Thomas", age: 67, children: ['Ryan']});

person.adopt('John Resig');

var children = person.get("children"); // ['Ryan', 'John Resig']

- Model 은 무한대로 커스텀 함수를 가질 수 있다.  기본으로 모든 함수는 public 이다.

Listening for Changes To The Model

  Person = Backbone.Model.extend({

         defaults: {

             name: 'Fetus',

             age: 0,

             children: []

         },

         initialize: function(){

             alert("Welcome to this world");

             this.bind("change:name", function(){

                 var name = this.get("name"); // 'Stewie Griffin'

                 alert("Changed my name to " + name );

             });

         },

         replaceNameAttr: function( name ){

             this.set({ name: name });

         }

     });

var person = new Person({ name: "Thomas", age: 67, children: ['Ryan']});   

person.replaceNameAttr('Stewie Griffin'); 

// This triggers a change and will alert()

- model 의 모든 attribute 는 값 변화에 대한 listener 를 설정할 수 있다.

- attribute 값 변화에 대한 listener 설정은 built-in 함수인 "bind" 함수를 통해서 하며, 형식은 아래와 같다.
 

 // 특정 attribute 에 대한 change listener 등록 
this.bind("change:[attribute_name]", function)

 // model 에 있는 모든 attribute 에 대한 change listener 등록 
this.bind("change", function)

Fetching, Saving and Destroying

- Model 은 기본적으로 Server 와 통신하기 위해서 Collection 이 일부에 포함되어야 한다. Collection 과 Model 의 관계는 Collection 쪽에서 확인 가능하다.

Tip and Tricks.

var person = new Person({ name: "Thomas", age: 67, children: ['Ryan']});   

var attributes = person.toJSON();

// { name: "Thomas", age: 67, children: ['Ryan']}

/* This simply returns a copy of the current attributes. */        

var attributes = person.attributes;    

/* The line above gives a direct reference to the attributes and you should be careful when playing with it.   Best practise would suggest that you use .set() to edit attributes of a model to take advantage of backbone listeners. */

- built-in 함수인 toJSON() 함수를 통해 Model 에 있는 모든 attribute의 key-value pair object 를 얻을 수 있다.

- toJSON() 은 Model 안의 attributes 값들을 JSON 형태로 "새로" 만들어 return 하지만, model.attributes 는 model의 attributes 의 reference 를 그대로 참조하는 형태이기 때문에, 사용할 때 조심해야 한다.

Person = Backbone.Model.extend({

// If you return a string from the validate function,

// Backbone will throw an error

         validate: function( attributes ){

             if( attributes.age < 0 && attributes.name != "Dr Manhatten" ){

                 return "You can't be negative years old";

             }

         },

         initialize: function(){

             alert("Welcome to this world");

             this.bind("error", function(model, error){

             // We have received an error, log it, alert it or forget it :)

                 alert( error );

             });

         }

     });        

var person = new Person;    

person.set({ name: "Mary Poppins", age: -1 });     

// Will trigger an alert outputting the error        

var person = new Person;    

person.set({ name: "Dr Manhatten", age: -1 });    

// God have mercy on our souls

- validate 함수는 attributes 들이 set 될 때 타게 되는 함수이며, 값을 return 하는 것은 error (validation fail)가 발생했다는 의미이다. return 값이 error 메세지가 된다.

- validation error 는 "error" 를 bind 해서 확인할 수 있으며, callback function 은 parameter 로 model 과 error 를 받는다.

도움이 되셨다면 손가락 꾸욱~ ( 로그인 필요 x )