Backbone.Viewでrender()

ここまでで紹介したViewの役割は、指定した要素の配下を管理するだけでした。

ここでは、指定した要素の下に、独自の要素を追加する方法を紹介します。

render()の追加

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()の結果をセットしています。この_.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が少しは使えるヤツになりました。