내 잔이 넘치나이다.

선택

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

예)

var ArticleView = Backbone.View.extend({

el: '#content',

template: _.template($('#template').html()),

events:{

'click h1': function(){

this.$('h1').append('+');

}

},

render: function(){

this.$el.html(this.template(this.model.toJSON()));

// this.model 값이 없지만 오류 없음 -> (1) model 을 사용

// model 이 아닌 다른 이름(mmm)의 attribute를 사용하면 찾지 못함 - this.mmm => undefined

// 아래 mmm 이름의 attribute를 사용하면 오류 없음 this.mmm

}

, mmm: new Backbone.Model({title: 'Backbone.js'})

});

var view = new ArticleView({

(1) model : new Backbone.Model({title: 'Backbone.js'})

});

view.render(();

이미 존재하는 객체를 선택해서 사용할 때는 tagName, className, attributes 속성을 사용할 수 없음

제거

Backbone.View 객체가 만든 문서 객체를 지워도 자신이 사라진지 모릅니다.

뷰를 완전히 제거할 때는 remove() 메서드를 사용합니다.

예)

view.remove();

템플릿

Backbone.js는 underscore.js 라이브러리로 템플릿을 생성합니다.

템플릿은 Backbone.View 객체의 template 속성을 사용합니다.

template - 뷰의 템플릿을 지정합니다. = view.template([data]) 

예)

<script id="template" type="text/template">

<h1><%= title %></h1>

</script>

var ArticleView = Backbone.View.extend({

tagName: 'section',

template: _.template($('#template').html()),

render: function(){

this.$el.html(this.template(this.model.toJSON()));

return this;

}

)};

var view = new ArticleView({

model: new Backbone.Model({

title: 'Backbone.js'

})

});

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

또는 Backbone.View 컨트롤러 역할 => initalize() 사용

// Backbone.View 생성자 함수를 상속합니다.

var ArticleView = Backbone.View.extend({

tagName: 'section',

template: _.template($('#template').html()),

initialize: function () {

this.model = new Backbone.Model({

title: 'Backbone.js'

});

this.render();

},

render: function () {

this.$el.html(this.template(this.model.toJSON())).appendTo('body');

}

});

// ArticleView 객체를 생성합니다.

new ArticleView();

이벤트

event - 뷰의 이벤트를 지정합니다.

extend() 메서드의 매개변수에 events 속성을 입력한다.

events 객체에는 '이벤트 선택자' 형태로 키를 입력하고 이벤트 리스너를 값으로 입력한다.

예)

var ArticleView = Backbone.View.extend({

tagName: 'section',

template: _.template($('#template').html()),

events:{
    'click h1': function(){

this.$('h1').append('+');

}

},

render: function(){

this.$el.html(this.template(this.model.toJSON()));

return this;

}

});

또는

events:{

'click h1': 'onHeaderClick'

},

render: function(){

this.$el.html(this.template(this.model.toJSON()));

},

onHeaderClick: function(){   

this.$('h1').append('+');

}

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>