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とかも触っていきたいです。