Backbone.View

今回はBackbone.Viewの紹介です。Model/Collectionのことは忘れても大丈夫。

Viewの役割

指定したDOM配下の要素を管理するためのもの。というのがfkmの認識です（間違ってる可能性あり）。AndroidでいうところのFragmentみたいな役割をやるようです。

さっそく、定義してみる

id="top"配下を定義してみます。

var TopView = Backbone.View.extend({
    el : '#top',
    events : {
        'click #button' : 'onClick'
    },
    initialize : function() {
        _.bindAll(this,	'onClick');
    },
    onClick : function() {
        console.log('button clicked');
    }
});

elで、どの要素の配下を見るかを指定します。jQueryで見つけてくるので、id指定の場合は#idの形式で指定します。

次に、eventsで配下にイベントを設定します。'click #id'で、指定したidの要素にクリック時のイベントとしてonClickを設定します。

initializeは、このViewインスタンスが作られた時に呼ばれます。ここでは、underscoreのbindAll()を呼ぶのがパターンのようです。これを呼ばないと、onClick()の中でthisを使った時、extendsに渡したオブジェクトでは無くなるので使い勝手が悪いです。

使ってみる

HTML側をこんな風にしておきます。

<section id="top">
  <button id="button">Login</button>
</section>

そしてJavaScriptではこんな感じでとりあえずインスタンスを作るだけでOKです。

$(function(){
  new TopView();
});

$(function(){}) としてready()で実行するのがポイントです。もし、HTMLでscriptタグをheadに置いていた場合、TopViewインスタンス作成時点でid="top"の要素が見つからず、正しく動作しません。割とこれはまるので注意。