Backbone.js入門その2｢Backbone.Viewで複数の要素を作る｣

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

今回は、Backbone.jsで、
複数要素(2つのボタン、プルダウン)を作成します。

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

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/

---

■2つのボタン (タグ文字列を追加)

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

main.js に下記の内容を記述します。

$(function() {

    var SampleView = Backbone.View.extend({

        events : {
            'click #id_button_update' : 'onClickUpdate', // (1)
            'click #id_button_delete' : 'onClickDelete', // (2)
        },
        render : function() { // (3)
            this.$el.append('<input id="id_button_update" class="cls_button_update" type="button" value="更新"><input id="id_button_delete" class="cls_button_delete" type="button" value="削除">');
            return this;
        },
        onClickUpdate : function() {
            console.log('onClickUpdate');
        },
        onClickDelete : function() {
            console.log('onClickDelete');
        }
    });

    var sampleView = new SampleView();
    $('body').append(sampleView.render().el);
});

(1)｢id_button_update｣のボタンをクリックしたときに、onClickUpdate関数が実行されます。
要素が複数ある場合は、IDまたは、スタイルのクラスを指定します。

IDを指定する場合は、ID名に｢#｣を付与します。
スタイルのクラスを指定する場合は、クラス名に｢.｣を付与します。下記の通りです。

events : {
    'click .cls_button_update' : 'onClickUpdate',
    'click .cls_button_delete' : 'onClickDelete',
},

(2)｢id_button_delete｣のボタンをクリックしたときに、onClickDelete関数が実行されます。
(3)Viewオブジェクトに2つ以上の要素を追加する場合は、
｢this.$el.append()｣で、自分のViewに対して、要素を追加します。

render関数は下記のように書くこともできます。
【デモはこちら】
【ソースファイルはこちら】

render : function() {
    this.$el.append($('<input/>', {
        'id' : 'id_button_update',
        'type' : 'button',
        'value' : '更新'
    })).append($('<input/>', {
        'id' : 'id_button_delete',
        'type' : 'button',
        'value' : '削除'
    }));
    return this;
},

---

■2つのボタン (テンプレートを追加)

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

自分のViewに対して、要素に追加する場合、
タグの文字列を指定しましたが、要素が複雑になると、
タグの文字列の内容を把握することが困難になります。

そこで、Underscore.js のテンプレートエンジンを使用します。

まずは、index.htmlのheadに以下の内容を追加します。
これが、Viewに追加する要素となるテンプレート用のHTMLになります。

<script type="text/template" id="template-buttons">
  <input id="id_button_update" type="button" value="更新">
  <input id="id_button_delete" type="button" value="削除">
</script>

次に、main.js に下記の内容を記載します。

$(function() {

    var SampleView = Backbone.View.extend({

        events : {
            'click #id_button_update' : 'onClickUpdate',
            'click #id_button_delete' : 'onClickDelete',
        },
        initialize : function() {
            this.compiledTemplate = _.template($('#template-buttons').text()); // (1)
        },
        render : function() {
            this.$el.append(this.compiledTemplate()); // (2)
            return this;
        },
        onClickUpdate : function(event) {
            console.log('onClickUpdate');
        },
        onClickDelete : function(event) {
            console.log('onClickDelete');
        }
    });

    var sampleView = new SampleView();
    $('body').append(sampleView.render().el);
});

(1)initialize関数は、Backbone.Viewの予約されている関数です。
Viewオブジェクトをnewするときに呼ばれる関数です。
ここで、テンプレートのIDを指定して、Underscore.jsの_.template()を実行します。
コンパイルされたテンプレート関数が this.compiledTemplate に格納されます。

(2)render関数で、自分のViewに this.compiledTemplate を追加します。

---

■プルダウン

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

テンプレートを使用してプルダウンを作成します。
まず、index.htmlのheadに以下の内容を追加します。

<script type="text/template" id="template-programing">
   <label for="language"><%= title %></label>
   <select id="language">
      <option value="<%= value.option1 %>"><%= label.option1 %></option>
      <option value="<%= value.option2 %>"><%= label.option2 %></option>
      <option value="<%= value.option3 %>"><%= label.option3 %></option>
      <option value="<%= value.option4 %>"><%= label.option4 %></option>
      <option value="<%= value.option5 %>"><%= label.option5 %></option>
   </select>
</script>

次に、main.js に下記の内容を記載します。

$(function() {

    var SampleView = Backbone.View.extend({

        events : {
            'change #language' : 'onChange'
        },
        initialize : function() {
            this.compiledTemplate = _.template($('#template-programing').text());
        },
        render : function() {

            var data = { // (1)
                'title' : 'プログラミング言語を選択してください',
                'label' : {
                    'option1' : 'JavaScript',
                    'option2' : 'Java',
                    'option3' : 'C言語',
                    'option4' : 'Ruby',
                    'option5' : 'Python'
                },
                'value' : {
                    'option1' : '1',
                    'option2' : '2',
                    'option3' : '3',
                    'option4' : '4',
                    'option5' : '5'
                }
            };
            this.$el.append(this.compiledTemplate(data)); // (2)
            return this;
        },
        onChange : function(event) {
            console.log('onChange:' + event.target.value);
        }
    });
    
    var sampleView = new SampleView();
    $('body').append(sampleView.render().el);
});

Underscore.jsのテンプレートでは、
HTMLの中に、<%= title %> と指定すると、titleのプロパティ値が出力されます。

(1) テンプレートで出力するオブジェクトを設定します。
(2) this.compiledTemplate 関数の引数に(1)のオブジェクトを引数で渡します。

以上です。

---

□過去の記事

Backbone.js入門その1｢Backbone.Viewで1つの要素を作る｣