Page tree
Skip to end of metadata
Go to start of metadata

Backbone의 기본

본 내용은 비제이퍼블릭에서 나온 '제대로 배우는 Backbone.js 프로그래밍' 에 나온 내용을 정리한 내용입니다.

보다 자세하고 정확한 내용은 책을 참조하시기 바랍니다.

Backbone 설치법


Backbone은 따로 설치할 필요없이 html 에 하기 3개의 script 를 추가하면 사용가능합니다.

https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
http://documentcloud.github.com/underscore/underscore-min.js
http://documentcloud.github.com/backbone/backbone-min.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
 
또는
npm install backbone

 

모델

 

  • Backbone의 모델은 데이터를 이용하는 로직 및 애플리케이션에서 필요한 데이터를 가지고 있습니다.
  • 사용자는 Backbone.Model 을 확장해서 모델을 생성합니다.

모델 생성하기

Backbone.Model을 확장하여 새로운 모델을 생성할수 있습니다.

var Todo = Backbone.Model.extend({
});
 
var todo1 = new Todo();
var todo2 = new Todo();

 

initialize

  • 신규 인스턴스를 생성시 initialize() 메소드를 이용해 초기화 가능
  • initialize 메소드는 필수가 아닌 선택사항임.
var Todo= Backbone.Model.extend({
  initialize: function() {
    console.log('Todo Model initialize');
  }
});
var todo1 = new Todo();
var todo2 = new Todo();

http://jsfiddle.net/warnee/jnf8B/673/

 

defaults

  • 모델 내부에 defaults를 정의해서 기본값을 가지고 있는 모델을 만들수 있음.
var Todo= Backbone.Model.extend({
  defaults: {
    title: '',
    completed: false
  },
  initialize: function() {
    console.log('Todo Model initialize');
  }
});
var todo1 = new Todo();
console.log("todo1 : " + JSON.stringify(todo1));
var todo2 = new Todo({
  title: 'hello todo2'
});
console.log("todo2 : " + JSON.stringify(todo2));
var todo3 = new Todo({
  title: 'hello todo3',
  completed : true
});
console.log("todo3 : " + JSON.stringify(todo3));
 

 

모델이 가진 속성에 접근하는 법

Model.get()

var Todo= Backbone.Model.extend({
  defaults: {
    title: '',
    completed: false
  }
});
var todo1 = new Todo();
console.log("todo1[title] : " + todo1.get('title'));
console.log("todo1[completed] : " + todo1.get('completed'));
var todo2 = new Todo({
  title: 'hello todo2',
  completed : true
});
console.log("todo2[title] : " + todo2.get('title'));
console.log("todo2[completed] : " + todo2.get('completed'));

 

Model.toJSON()

  • 모델의 전체 속성을 확인하는 경우에는 toJSON 메서드를 사용해보자.
  • 실제 JSON문자열로 반환하지는 않고 JSON 스타일의 문자열이 반환된다.
var Todo= Backbone.Model.extend({
  defaults: {
    title: '',
    completed: false
  }
});
var todo1 = new Todo({
  title: 'hello todo1',
  completed : true
});
 
var attrs = todo1.toJSON();
console.log("attrs : " + todo1.toJSON());

 

Model.set()

  • Model.set() 메소드를 이용하여 속성을 변경할 수 있다.
  • 속성들이 변경되었을 때 변경 이벤트가 발생된다.
var Todo = Backbone.Model.extend({
  defaults: {
    title: '',
    completed: false
  }
});
 
var todo1 = new Todo();
 
todo1.set("title", "hello todo1");
console.log("title : " + todo1.get('title'));
 
todo1.set({
  title: 'hi todo1',
  completed: true
});
 
console.log("title : " + todo1.get('title'));
console.log("completed: " + todo1.get('completed'));

 

직접 접근 방법

  • 모델은 .attributes 속성을 가지고 있음.
  • attributes 속성을 이용하여 값을 설정하는 경우에는 모델에 연결된 이벤트는 발생하지 않음.
  • Model.set을 이용하거나 초기화 시에 값을 설정하는 것이 가장 좋음.
var Todo = new Backbone.Model();
Todo.set({title:''}, {completed:false});
 
console.log(!Todo.hasChanged(0));
console.log(!Todo.hasChanged(''));

 

모델이 변경되었음을 알고 싶을때

  • 모델이 변경되었을때 알림이 필요하다면 변경 이벤트를 선언하기 위해 모델에 리스너를 바인딩할 수 있다.
  • 리스너를 추가하는 가장 좋은 위치는 initialize() 메소드 이다.
var Todo = Backbone.Model.extend({
  defaults: {
    title: '',
    completed: false
  },
  initialize: function() {
    this.on('change', function() {
      console.log('Todo Model Value Changed');
    });
  }
});
 
var myTodo = new Todo();
 
myTodo.set('title', 'hello todo 1');
console.log("---------");
myTodo.set('completed', true);
console.log("---------");
myTodo.set({
  title: 'hi todo1',
  completed: true
});

 

모델의 유효성 검증

  • Backbone은 모델의 유효성을 검증할 수 있는 Model.validate() 메소드를 제공함.
  • Model.validate() 메소드는 속성에 값을 넣기 전에 실행됨.
  • 기본적으로 save() 메소드나 if{validate:true}를 인자로 넘긴 set 메소드를 호출할 때 실행됨.
var Todo = Backbone.Model.extend({
  defaults: {
    completed: false
  },
  validate: function(attribs) {
    if(attribs.title === undefined) {
      return "Remember to set a title for your todo.";
    }
  },
  initialize: function() {
    console.log('This model has been initialized.');
    this.on("invalid", function(model, error) {
      console.log(error);
    });
  }
});
 
var myTodo = new Todo();
myTodo.set('completed', true, {validate: true});
console.llog('completed: ' + myTodo.get('completed'));

 

  • HTML 코드를 가지고 있지 않고 모델 데이터를 이용한 로직을 가지고 있음.
  • Underscore의 템플릿, Mustache 와 같은 자바스크립트 템플릿을 이용하여 구현 가능
  • 뷰의 render() 메소드는 모델의 change() 이벤트와 같이 바인딩됨.

뷰 생성하기

Backbone.View를 확장하여 생성 가능

var TodoView = Backbone.View.Extend({
  tagname: 'li',
 
  // 단일 항목을 위한 템플릿 함수
  todoTpl: _.template("An example template"),
 
  events: {
    'dblclick label': 'edit',
    'keypress .edit': 'updateOnEnter',
    'blur .edit': 'close'
  },
 
  // todo 항목의 제목을 렌더링
  render: function() {
    this.$el.html(this.todoTpl(this.model.toJSON()));
    this.input = this.$('.edit');
    return this;
  },
 
  edit: function() {
    // todo 라벨이 더블클릭되면 실행
  },
  close: function() {
    // todo 에서 포커스를 잃어버리면 실행
  },
  updateOnEnter: function(e) {
    // todo 편집모드에서 키가 눌려졌을 때 실행
  }
});
 
var todoView = new Todoview();
 
console.log(todoView.el);

 

el이란?

  • DOM 요소에 대한 참조
  • 모든 뷰는 반드시 하나의 el을 가져야 함.
  • 뷰는 컨텐츠를 구성시 el을 사용하며 그 el을 DOM요소에 한번에 삽입.(리페인트와 리플로우 횟수를 줄여 브라우저의 렌더링 속도를 높임)
  • 생성 방법
    • View를 확장하여 선언할때 tagName을 이용해서선언
    • 요소가 페이지에 이미 존재하는 경우 CSS 셀렉터로 설정가능 --> el: '#footer'
    • 뷰를 만들때 기존에 있는 요소로 el을 설정 --> var todosView = new TodosView({el: $('footer')});
  • jquery에서 Node 선택자
  • ex) $(p).text(''); == $el.p.text('')

$el과 $()

  • Backbone에서 제공하는 함수.
  • view.$el == $(view.el)
  • view.$(selector) == $(view.el).find(selector)

setElement

  • 기존에 있는 Backbone 뷰에 다른 DOM 요소를 적용해야 할 필요가 있을 때 사용.

render() 메서드

  • 템플릿을 렌더링하기 위한 로직을 정의하는 함수
  • Underscore의 마이크로 템플릿팅, Mustache 등을 사용 가능

이벤트 해시

  • Backbone 이벤트 해시는 el 커스텀 셀렉터를 이용하거나 셀렉터가 없는 경우 직접 el에 이벤트 리스너를 붙일 수 있음.
  • click, submit, mouseover, dblclick 등의 DOM 이벤트 타입을 지원

 

컬렉션

  • 모델의 세트

컬렉션 생성하기

Backbone.Collection을 확장하여 생성가능

var Todo = Backbone.Model.extend({
  defaults: {
    title:'',
    completed: false
  }
});
 
var TodosCollection = Backbone.Collection.extend({
  model: Todo
});var myTodo = new Todo({ title: "title 1", id: 2 });var todos = new TodosCollection([ myTodo ]);

모델의 추가

var Todo = Backbone.Model.extend({
  defaults: {
    title:'',
    completed: false
  }
});


var TodosCollection = Backbone.Collection.extend({
  model: Todo
});

var a = new Todo({ title:'title 1' }),
    b = new Todo({ title:'title 2' }),
    c = new Todo({ title:'title 3' });


var todos = new TodosCollection([a, b]);
todos.add(c);

모델의 제거

var Todo = Backbone.Model.extend({
  defaults: {
    title:'',
    completed: false
  }
});


var TodosCollection = Backbone.Collection.extend({
  model: Todo
});

var a = new Todo({ title:'title 1' }),
    b = new Todo({ title:'title 2' }),
    c = new Todo({ title:'title 3' });


var todos = new TodosCollection([a, b, c]);
 
todos.remove(c);
todos.remove([a, b]);

모델 조회하기

  • Collection.get() 메서드를 사용
    • Collection.get(id)
    • Collection.get(cid)
  • id : 각 모델이 가지는 정수형 또는 문자열로 구성된 유일한 식별자
  • cid : 모델 생성 시에 Backbone에 의해 자동으로 증가되는 cid
var todo1 = new Todo({ title:'title 1', id:2 });
 
var todos = new TodosCollection([todo1]);
 
var todo2 = todos.get(2);
 
var todoCid = todos.get(todo2.cid);

이벤트 리스닝

  • 컬렉션은 add와 remove 이벤트를 듣기 위해 리스너를 추가하거나 삭제할 수 있음.
  • Backbone 이벤트는 once() 메서드를 지원하여 변경 이벤트 알링이 왔을 때 콜백 메서드가 한번만 호출되도록 해줌.

컬렉션 재설정

  • 모델을 개별적으로 추가하고 제거하는 것보다 한 번에 전체 컬렉션을 업데이트 하는 것이 좋음.
  • Collection.set() 메서드를 통해 모델의 배열을 얻을수 있고 추가 삭제가 가능하다.
  • 컬렉션의 전체 컨텐츠를 전부 간단하게 변경하는 경우에는 Collection.reset() 메서드를 사용.
  • Collection.reset() 을 사용하면 remove이벤트나 add이벤트가 시작되지 않음.
  • update() 메소드는  특정 모델의 목록을 업데이트 해줌
    • 모델이 컬렉션에 존재하지 않는 경우에는 컬렉션에 추가
    • 존재하는 경우에는 모델의 속성을 병합
    • 모델의 목록에 존재하지 않고 컬렉션에만 존재하는 모델은 삭제
  • No labels