Backbone復習

ItemsViewのremoveItems部分、toArray()してeachしないとダメっぽい。this.collection.modelsとかで回しても何故か半分しか実行されず、stackoverflowに載ってたけどちょっとまだ理解しきれてないからこの辺り調べる。

by FiNGAHOLiC

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>

CSS

.delete{ padding-left:.5em; cursor:pointer; }

JavaScript

(function($, window, document, undefined){
    
    var Item = Backbone.Model.extend({
        defaults : {
            text : 'hogehoge'
        },
        initialize : function(){
            this.set({
                itemid : 'item' + this.cid
            });
        },
        clear : function(){
            this.destroy();
        }
    });
    
    var Items = Backbone.Collection.extend({
        model : Item
    });
    
    var ItemView = Backbone.View.extend({
        tagName : 'li',
        className : 'item',
        events : {
            'click .delete' : 'removeItem'
        },
        initialize : function(){
            _.bindAll(this, 'render', 'removeItem', 'remove');
            this.model.bind('destroy', this.remove);
        },
        render : function(){
            $(this.el).html(''
                + this.model.get('itemid')
                + ':'
                + this.model.get('text')
                + '<span class="delete">'
                + '[delete]'
                + '</span>'
            );
            return this;
        },
        removeItem : function(){
            this.model.clear();
        }
    });
    
    var ItemsView = Backbone.View.extend({
        el : 'body',
        events : {
            'click #add' : 'addItem',
            'click #deleteall' : 'removeItems',
            'click #check' : 'check'
        },
        initialize : function(){
            _.bindAll(this, 'render', 'addItem', 'appendItem', 'removeItems');
            this.collection = new Items();
            this.collection.bind('add', this.appendItem);
            this.render();
        },
        render : function(){
            $(this.el).append(''
                + '<button id="add">add item</button>'
                + '<button id="deleteall">remove all items</button>'
                + '<button id="check">check model length</button>'
                + '<ul></ul>'
            );
        },
        check : function(){
           ...