ここまでで紹介したViewの役割は、指定した要素の配下を管理するだけでした。
ここでは、指定した要素の下に、独自の要素を追加する方法を紹介します。
Viewにrenderメソッドを追加します。このメソッドでは、this.$el.html()で内容を差し替える処理を行います。
var TopView = Backbone.View.extend({
el : '#container',
template : _.template($("#layout_top").html()),
events : {
'click #button' : 'onClick'
},
initialize : function() {
_.bindAll(this, 'onClick');
},
onClick : function() {
console.log('button clicked');
},
render : function() {
this.$el.html(this.template);
}
});
templateに_.template()の結果をセットしています。この_.template()は文字通り、underscore.jsのメソッドで、JavaScriptでPHPやRoRのようなテンプレートが使えます。
id=layout_topは下記のように指定します。
<script type="text/template" id="layout_top">
<label>Welcome</label>
<button id="top_button_login">Login</button>
</script>
<script type="text/javascript" src="app.js"></script>
例によって評価時にDOMが構築されていないと、id=layout_topが見つからないので、アプリ本体のjsファイルをHTMLの一番下で読み込むように修正しておきます。
_.template()で使える表現はunderscore.jsの使い方でそのうち紹介します(あくまで予定。。。)
これで、Viewが少しは使えるヤツになりました。