Backbone.js入門その6｢ModelとCollection｣

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

今回は、Backbone.jsのBackbone.ModelとBackbone.Collectionを使ったViewを作成します。
Modelは、データを表します。
Backbone.jsでは、データの更新や検証、Ajax通信などの機能を提供します。
Collectionは、Modelの配列を表します。
Backbone.jsでは、配列の追加、削除、並び替えなどの機能を提供します。

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

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/

---

■プルダウン

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

以前の記事で作成したプルダウンを
今回は、ModelとCollectionを使用して作成します。

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 ProgramingLanguageModel = Backbone.Model.extend({ // (1)
        defaults : { // (2)
            'name' : '',
            'value' : 0
        }
    });

    var ProgramingLanguageCollection = Backbone.Collection.extend({ // (3)
        model : ProgramingLanguageModel // (4)
    });

    var SampleView = Backbone.View.extend({

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

    var OptionView = Backbone.View.extend({
        tagName : 'option',
        initialize : function(model) {
            this.label = model.get('name'); // (7)
            this.attributes = {
                'value' : model.get('value') // (8)
            };
        },
        render : function() {
            this.$el.html(this.label);
            return this;
        }
    });

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

(1)Modelを定義します。Modelは、Backbone.Model.extend()関数を使用します。
(2)defaultsプロパティで、デフォルト値の設定を行います。
(3)Collectionを定義します。Collectionは、Backbone.Collection.extend()関数を使用します。
(4)CollectionにModelを設定します。ProgramingLanguageCollection は、ProgramingLanguageModel の配列を持つということを表します。
(5)Viewのinitialize関数で、ProgramingLanguageCollectionのオブジェクトを生成しています。その引数に、5つ分のデータを設定しています。
このとき、ProgramingLanguageCollection には、5つ分のProgramingLanguageModelを保持しています。
(6)Viewのrender関数で、Collectionの配列のサイズ分をSubViewに追加しています。this.collection.models は、ProgramingLanguageModelの配列を指します。
(7)1つ分のProgramingLanguageModelから、nameプロパティを取得しています。
(8)1つ分のProgramingLanguageModelから、valueプロパティを取得しています。

以上です。

---

□過去の記事

Backbone.js入門その5｢静的HTMLでBackbone.Viewを作る｣
Backbone.js入門その4｢SuperViewとSubViewのアクセスを作成する｣
Backbone.js入門その3｢Backbone.ViewでSubViewを作る｣
Backbone.js入門その2｢Backbone.Viewで複数の要素を作る｣
Backbone.js入門その1｢Backbone.Viewで1つの要素を作る｣