Backbone.View - 상속

Backbone.View

// 뷰의 역할

- 컨트롤러를 통해 입력받은 모델을 화면에 출력하는 역할

- 사용자 이벤트를 처리하는 역할

// 컨트롤러의 역할

- 모델에서 이벤트가 발생하면 뷰를 변경하는 역할

- 뷰에서 이벤트가 발생하면 모델을 변경하는 역할

- 모든 잡다한 처리를 수행하는 역할

Backbone.View 객체가 뷰와 컨트롤러의 기능을 담당합니다.

상속

뷰는 반드시 상속해서 사용합니다. Backbone.View 생성자 함수를 상속해서 ArticleView 생성자 함수를 

만듭니다.

var ArticleView = Backbone.View.extend({ });

객체 속성

el - Backbone.View 객체의 문서 객체 모델을 나타냅니다.

$ - jQuery 함수를 나타냅니다.

$el - $(el)를 나타냅니다.

render() - 화면에 뷰를 출력합니다.

tagName - 태그 이름

className - 클래스 속성

attribute - 일반 속성

예)

// Backbone.View 생성자 함수

var ArticleView = Backbone.View.extend();    

// ArticleView 객체를 생성

var view = new ArticleView();

// 화면에 출력 - view는 기본적으로<div> 태그를 출력

view.render().$el.appendTo('body');

예)

var ArticleView = Backbone.View.extend({

tagName: 'section',

className: 'container content',

attribute:{

'data-index': 0

},

initialize: function(){    // 상속할 때 initialize() 메소드를 사용할 수 있음

this.render();

},

render: function(){

this.$el.html('<h1>Backbone.js</h1>');

return this;

}

});

결과)

<section data-index="0" class="container content">

<h1>Backbone.js</h1>

</section>