今回はBackbone.Viewの紹介です。Model/Collectionのことは忘れても大丈夫。
指定した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"の要素が見つからず、正しく動作しません。割とこれはまるので注意。