Backbone.jsのCollectionを復習

https://app.codegrid.net/entry/backbone-collection

by FiNGAHOLiC

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.10/backbone-min.js"></script>
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<form id="form">
    <input type="input" id="input" placeholder="todoを入力して下さい。">
    <input type="submit" id="submit">
</form>
<div id="lists"></div>

JavaScript

(function(){
    
    // モデル
    var Todo = Backbone.Model.extend({});
    
    // コレクション
    var Todos = Backbone.Collection.extend({
        model: Todo
    });
    
    var todos = new Todos();
    
    // add時に呼ばれる
    todos.on('add', function(todo){
        console.log(todo.get('text'));
    });
    
    // モデルを作成
    var todo1 = new Todo({ text: '掃除' });
    var todo2 = new Todo({ text: '洗濯' });
    var todo3 = new Todo({ text: '勉強' });
    
    // モデルをコレクションに追加
    todos.add(todo1);
    todos.add(todo2);
    // 最初に格納する場合はatオプションでindexを指定する
    todos.add(todo3, { at: 0 });
    
    // 配列で渡すことも出来る
    // todo.add([todo1, todo2]);
    
    // オブジェクトを渡せばモデルのインスタンス化もしてくれる
    // todos.add({ text: '掃除' });
    // todos.add({ text: '洗濯' });
    
    // さらに配列でも可能
    // todos.add([
    //     { text: '掃除' },
    //     { text: '選択' }
    // ]);
    
    console.log(todos.models);
    console.log(todos.length);
    
    // データをリセットする場合
    // todos.reset([todo1, todo2]);
    
}());

(function(){
    
    var Todo = Backbone.Model.extend({});
    
    var Todos = Backbone.Collection.extend({
        model: Todo
    });
    
    var todos = new Todos([
        { text: '勉強', completed: true },
        { text: '洗濯', completed: false },
        { text: '掃除', completed: false }
    ]);
    
    var $form = $('#form');
    var $input = $('#input');
    var $button = $('#submit');
    var $lists = $('#lists');
    
    todos.on('add', function(todo){
        var $list = $('<div>').text(todo.get('text'));
        $lists.append($list);
    });
    
    $form.on('submit', function(e){
        e.preventDefault();
        todos.add({ text: $input.val(), completed: false });
    });
    
    // 完了済みのtodoを返す
    var completed = todos.filter(function(todo){
        return todo.get('completed');
    });
    
    // 配列で返ってくる
    console.log(completed);
    
}());

(function(){
    
    var Todo = Backbone.Model.extend({});
    
    var Todos = Backbone.Collection.extend({
       ...