孤独プログラマー譚

孤独死が近い。

Backbone.jsでCollectionを触ってみる

Collectionを触ったことが無かったので、簡単に触っておこうと思います。

Cllectionは複数のModelを突っ込める器のようなものです。
DBに例えると、Modelがレコードだとすると、Collectionはテーブルになります。

以下、コードの全容。
タスクリストのようなアプリケーションです。
フォームにテキストを入力してボタンを押すと、リストにテキストが追加されます。
ただし、ブラウザの更新ボタンを押すとすべて初期化されます。笑

<html>
<script src="underscore-min.js"></script>
<script src="jquery.js"></script>
<script src="backbone-min.js"></script>
<script>
$(function() {
    // モデル
    var Model = Backbone.Model.extend();

    // コレクション
    var Collection = Backbone.Collection.extend({
        model: Model,
    });
    var collection = new Collection;

    // ビュー
    var View = Backbone.View.extend({
        el: 'body',
        events: {
            'click button': 'addItem',
        },
        initialize: function() {
            this.listenTo(this.collection, 'add', this.render);
        },
        addItem: function() {
            this.collection.add({ name: $('input').val() });
        },
        render: function(model) {
            $('ul').append($('<li>').text(model.get('name')));
            $('input').val('');
        },
    });
    var view = new View({ collection: collection });
});
</script>

<body>
    <input type="text">
    <button>追加</button>
    <ul>
    </ul>
</body>
</html>


var Collection = Backbone.Collection.extend({
    model: Model,
});
var collection = new Collection;

コレクションの作成。使用するモデルを指定します。

var View = Backbone.View.extend({
    el: 'body',
    events: {
        'click button': 'addItem',
    },
    initialize: function() {
        this.listenTo(this.collection, 'add', this.render);
    },
    addItem: function() {
        this.collection.add({ name: $('input').val() });
    },
    render: function(model) {
        $('ul').append($('<li>').text(model.get('name')));
        $('input').val('');
    },
});
var view = new View({ collection: collection });

ビューの作成。
コレクションにモデルが追加されると、コレクションで「add」イベントが発火されます。
ビューはaddイベントの発火を感知し、renderメソッドが実行されます。

render: function(model) {
    $('ul').append($('<li>').text(model.get('name')));
    $('input').val('');
},

このメソッドですが、自動で引数に追加されたモデルが渡されるようです。こりゃ便利だ。


Backbone.jsいいなぁ。でも古いフレームワークなので、新しいブログ記事が全く出てこない。
JavaScriptフレームワークの歴史を追うってことで、今後はReact.jsとかも触っていきたいです。