내 잔이 넘치나이다.

템플릿

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('+');

}