Backbone.js入門その5｢静的HTMLでBackbone.Viewを作る｣

こんばんは。ゆんぼうです。

今回は、Backbone.jsで、
静的HTMLでViewを作成します。

前回までは、htmlのbodyにBackbone.Viewのelをappendして、Webページを表示しておりましたが、
今回は、htmlのbodyに要素を直接記述して、要素のidをBackbone.Viewのelに紐付けて表示します。

今回使用する環境は下記の通りです。

Webブラウザ
・Mozilla Firefox (v34.05) https://www.mozilla.org/ja/firefox/new/
・FireBug (v2.0.7) https://addons.mozilla.org/ja/firefox/addon/firebug/

JavaScriptライブラリ
・Backbone.js (v1.1.2) http://backbonejs.org/
・Underscore.js (v1.7.0) http://underscorejs.org/
・jQuery (v2.1.1) http://jquery.com/


index.html のbody に下記の内容を記述します。

<div id="id_buttons">
  <input id="id_button_update" type="button" value="更新">
  <input id="id_button_delete" type="button" value="削除">
</div>

---

■ViewにIDを定義する

【デモはこちら】
【ソースファイルはこちら】

Viewのelに要素のIDを定義して、Webページを表示します。
main.js に下記の内容を記述します。

$(function() {
    var BaseView = Backbone.View.extend({
        el : '#id_buttons', // (1)
        events : {
            'click #id_button_update' : 'onClickUpdateButton',
            'click #id_button_delete' : 'onClickDeleteeButton'
        },
        onClickUpdateButton : function(event) {
            console.log('onClickUpdateButton');
        },
        onClickDeleteeButton : function(event) {
            console.log('onClickDeleteeButton');
        }
    });

    var baseView = new BaseView();
});

(1)BaseViewのelプロパティに要素ID｢id_buttons｣を定義します。
そのBaseViewを new すると、要素IDとBaseView.Viewが紐付けられます。
(※ボタンを押下すると、ログが出力されることで、紐付けが確認できます。)

---

■IDをViewに渡す

【デモはこちら】
【ソースファイルはこちら】

Viewのオブジェクトに、要素IDを渡します。
main.js に下記の内容を記述します。

$(function() {
    var ButtonView = Backbone.View.extend({
        events : {
            'click' : 'onClick'
        },
        onClick : function(event) {
            console.log(event.target.id + '#onClick');
        }
    });

    var buttonView1 = new ButtonView({ // (1)
        'el' : '#id_button_update'
    });

    var buttonView2 = new ButtonView({ // (2)
        'el' : '#id_button_delete'
    });
});

(1)更新ボタンの要素ID｢id_button_update｣を渡して、ButtonViewのオブジェクト生成します。
更新ボタンとButtonViewが紐付けられます。
(2)削除ボタンも同様です。

更新ボタンと削除ボタンはそれぞれ別々のViewオブジェクトとなります。

以上です。