도플광어의 Backbone.js 강좌 1. 모델

|


1. 모델 클래스 만들기


Model 객체로부터 상속받아서 새로운 클래스를정의 할수있다.


var Person = Backbone.Model.extend({

        initialize: function(data) {

            console.log('welcome backbone');

            console.log('hello ' + data.name);

        }

    });



스크립트언어에 익숙하지않다면 약간 이상해보일수도있지만 이것은 스크립트언어이기때문에 가능한 문법이다. 컴파일러형언어에서는 클래스와 객체가 명확히 나누어져있다. 클래스는 붕어빵틀역역활을 하고 인스턴스 객체는 그틀로 만들어진 붕어빠같은것이지만

스크립트언어에서는 붕어빵틀과 붕어빵의 구분이 명확하지않다. 스크립트언어에서는 인스턴스만 객체 있을뿐이다. 왜냐하면 컴파일과 실행이 따로 분리되어있지않고 항상실행상태로 간주되기때문이다. 코딩을 하는중간에도 실행중인것이다. 그래서 틀이라는 개념이 컴파일러형언어처럼 경직되어있지않다.


그래서 위와같이 어떤 함수 객체가 새로운 함수 객체를 만들어 반환할수도있고 이미만들어진 객체에 새로운 멤버데이터가 추가 될수도있는것이다.

Person은 인스턴스객체 이면서 동시에 클래스가 될수도있다.(c++ 프로그래머만 알아들을수있는 말?)


Peroson이 새로운 인스턴스를 만들려면 다음과 같이한다.


var somebody = new Person({name:'tommy'});


{name:'tommy'} 은 생성자에 넘겨주는 인자와 같은 역활을한다. 이 인자는 그대로 initialize함수의 인자로 전달된다.


2. 멤버 다루기


멤버 변수에 접근하는 방법은


내부에서는 

this.attributes.name

this.get('name'); 두가지로 가능하다.


외부에서접근은 

somebody.attributes.name; 

somebody.get('name');


역시 두가지 모두 가능하다.


somebody.toJSON();

json형태로 모델데이터를 내보낼수도 있다.


3. initialize 함수


생성자에서 넣어준값이 파라메터로 넘어올수있고 또는 함수내에서 this.attributes 형태로 받아볼수있다.

4. defaults 구조체


초기 값들을 설정해주는 일종의 초기화 객체이다. 단순히 객체만 값을 초기화 해줄목적이면 initialize에서보다 defaults에서 단순하게 정의만 해주는게 낫다.


Person = Backbone.Model.extend(

 initialize: function() { console.log('wellcome' + this.get('name')); }, 

 defaults: { name: 'lsz', age: 42, children: [] }

 });


이렇게 하면 name의 기본값은 'lsz가된다.


5. 리스너


값이 바뀌면 연결해서 함수가 자동으로 호출되게 하는 개념이다.


function start() {

    Person = Backbone.Model.extend({

        initialize: function() {

            console.log('wellcome' + this.get('name'));

            /*

             * 리스너 설정 예 

             */

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

                console.log('change : ' + this.get('name'));

            });

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

                console.log('error occur~');

                console.log(model);

                console.log(error);

            })


        },

        defaults: {

            name: 'lsz',

            age: 42,

            children: []

        },

        replaceNameAttr: function(_name) {

            this.set({name:_name});

        },

        validate : function(attributes) {

          if(attributes.age < 0) {

              return 'u cant have negative age!';

          }  

        }

    });

    var person = new Person();

    person.set({name: 'tommy'});

    console.log(person.get('name'));

    person.set({age:-2});


}


bind 함수를 통해서 값과 변화가 있을때 연결할 함수를 정한다. 예제에서는 name값이 바뀌면 자동으로 인자로 연결해준 함수가 호출된다.


validate 함수를 이용해서 멤버변수값들의 범위를 지정할수있다. 만약 적절하지못한 범위의 값이 들어오면 해당 메시지를 보내거나 특정한 작업을 수행할수있다. 여기서는 age가 음수값이 나오면 오류 메씨지를 리턴하도록 했다.


bind 에서 'error'로 묶어진 함수에서 처리가된다. 묶어진 함수의 첫번째 인자로는 에러가 유발된 객체가 오고 두번째에는 validate에서 넘어온 메씨지나 오브잭트가 온다.


6. 상속


Person = Backbone.Model.extend({

        initialize: function(data) {

            console.log('init person');


        },

        test: function() {

            console.log('test!' + this.attributes.name);

        },

        test2: function() {

            console.log('person test!' + this.attributes.name);

        }

    });


    Soldier = Person.extend({

        initialize: function(data) {

            console.log('init soldier');

        },

        test2: function() {

            console.log('Soldier test!' + this.attributes.name);

        }


    });

    

    var soldier = new Soldier({name: 'tom', age: 27});


    soldier.test();

    soldier.test2();

    

    var person = new Person({name: 'jery', age: 27});

    person.test2();



Solider 를 Person을 상속받아서 만들었다. 이렇게 만들어진 soldier 는 test함수를 정의 하지 않았더라도 부모의 test 함수를 호출하게된다.






And