Backbone.js入門その3｢Backbone.ViewでSubViewを作る｣

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

今回は、Backbone.jsで、
SubViewを作成します。SubViewとは、自分のViewに追加するViewのことです。

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

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つのボタン

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

2つのボタンについて
前回はテンプレートを使用しましたが、
今回は使用せずにSubViewを使用して作成します。

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

$(function() {

    var SampleView = Backbone.View.extend({

        events : {
            'click #id_button_update' : 'onClickUpdate',
            'click #id_button_delete' : 'onClickDelete',
        },
        initialize : function() { // (1)
            this.updateButtonView = new UpdateButtonView();
            this.deleteButtonView = new DeleteButtonView();
        },
        render : function() {
            this.$el.append(this.updateButtonView.el).append(this.deleteButtonView.el); // (2)
            return this;
        },
        onClickUpdate : function(event) {
            console.log('onClickUpdate');
        },
        onClickDelete : function(event) {
            console.log('onClickDelete');
        }
    });

    var UpdateButtonView = Backbone.View.extend({ // (3)
        tagName : 'input',
        id : 'id_button_update',
        attributes : {
            type : 'button',
            value : '更新'
        }
    });

    var DeleteButtonView = Backbone.View.extend({ // (4)
        tagName : 'input',
        id : 'id_button_delete',
        attributes : {
            type : 'button',
            value : '削除'
        }
    });

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

2つボタンを表すViewは UpdateButtonView と DeleteButtonView です。

SampleView で、UpdateButtonView、DeleteButtonViewのオブジェクトを生成してから
SampleView自身に、追加しています。

SampleView が親のView、
UpdateButtonView、DeleteButtonView が子のView(SubView)となります。

(1)initialize関数で、UpdateButtonView、DeleteButtonViewのオブジェクトを生成します。
(2)render関数で、自分のViewに、UpdateButtonView、DeleteButtonViewを追加します。
(3)UpdateButtonViewのオブジェクトを定義します。
(4)DeleteButtonViewのオブジェクトを定義します。

---

■プルダウン

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

プルダウンのoptionタグについて
前回はテンプレートを使用しましたが、
今回は使用せずにSubViewを使用して作成します。

まず、index.htmlのheadに以下の内容を追加します。

<script type="text/template" id="template-programing-subview">
   <label for="language"><%= title %></label>
   <select id="language"></select>
</script>

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

$(function() {

    var SampleView = Backbone.View.extend({

        events : {
            'change #language' : 'onChange'
        },
        initialize : function() {
            this.compiledTemplate = _.template($('#template-programing-subview').text()); // (1)
            this.optionList = [  // (2)
                new OptionView({'label' : 'JavaScript','attributes' : {'value' : '1'}}),
                new OptionView({'label' : 'Java','attributes' : {'value' : '2'}}),
                new OptionView({'label' : 'C言語','attributes' : {'value' : '3'}}),
                new OptionView({'label' : 'Ruby','attributes' : {'value' : '4'}}),
                new OptionView({'label' : 'Python','attributes' : {'value' : '5'}})
                ];
        },
        render : function() {
            var data = {
                'title' : 'プログラミング言語を選択してください'
            };
            this.$el.append(this.compiledTemplate(data)); // (3)
            _.each(this.optionList, function(option) {
                this.$el.find('#language').append(option.render().el); // (4)
            }, this);
            return this;
        },
        onChange : function(event) {
            console.log('onChange:' + event.target.value);
        }
    });

    var OptionView = Backbone.View.extend({ // (5)
        tagName : 'option',
        initialize : function(args) {
            this.label = args.label;
        },
        render : function(){
            this.$el.html(this.label);
            return this;
        }
    });

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

プルダウンのoptionタグを表すViewが OptionView です。
SampleView で 5つ分の OptionView のオブジェクトを生成してから
SampleView自身に、追加しています。

SampleView が親のView、
5つの OptionView が子のView(SubView)となります。

(1)テンプレートIDを指定して、テンプレート関数を生成します。
(2)SubViewの配列を作成します。
(3)自分のViewにテンプレートを追加します。
(4)テンプレート内のID｢language｣に対して、SubViewを追加します。
(5)SubViewを定義します。

以上です。

---

□過去の記事

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