1

私は次のように書いていますが、何らかの理由でコレクションからアイテムを削除しようとすると、removeItem関数内のアイテムに対して未定義が返されます。

Todos = (function(){

//////////////////////////
// 
//  MODEL
// 
//////////////////////////

var TodoModel = Backbone.Model.extend({

    defaults: {
        id: null,
        item: null
    }

});

//////////////////////////
// 
//  COLLECTION
// 
//////////////////////////

var TodoCollection = Backbone.Collection.extend({

    model: TodoModel

});

//////////////////////////
// 
//  VIEW
// 
//////////////////////////

var TodoView = Backbone.View.extend({

    el: $('#todos'),

    itemField: $('#new-item'),

    initialize: function(){
        this.el = $(this.el);
    },

    events: {
        'submit form': 'addItem',
        'click .remove-item': 'removeItem',
        // Debug
        'click #print-collection': 'printCollection'
    },

    template: $('#item-template').html(),

    render: function(item) {
        var templ = _.template(this.template);
        var id = _.uniqueId('todo_');
        this.el.children('ul').append(templ({id: id,item: item}));
    },

    addItem: function(e) {
        e.preventDefault();
        item = this.itemField.val();
        // Call render
        this.render(item);
        // Clear field
        this.itemField
            .val('')
            .focus();
        // Add to collection
        var newItem = new TodoModel({
            item: item
        });
        this.collection.add(newItem);
    },

    removeItem: function(e) {
        var thisid = this.$(e.currentTarget).parent('li').data("id");
        var thisitem = this.collection.get(thisid);
        thisitem.remove();
        // Remove from DOM
        $(e.target).parent('li')
            .fadeOut(300,function() {
                $(this).remove();
            });
    },

    printCollection: function(){
        this.collection.each(function(item) {
            console.log(item.get('item'));
        });
    }

});

//////////////////////////
// 
//  SELF
// 
//////////////////////////

self = {};
self.start = function(){
    new TodoView({collection: new TodoCollection()});
};
return self;

});
4

1 に答える 1

7

モデルにはremoveメソッドがないため（自分でメソッドを追加した場合を除く）、これは機能しません。

var thisitem = this.collection.get(thisid);
thisitem.remove(); // <------ this goes boom!

モデルにはdestroyメソッドがありますが、次のことができます。

thisitem.destroy();

これにより、モデルがなくなったことがサーバー"destroy"に通知され、モデルがトリガーされたイベントによって、モデルがなくなったことがコレクションに通知されます。サーバーと通信したくない場合は、コレクションをremoveモデルに伝えることができます。

this.collection.remove(thisitem);

これにより、サーバーに迷惑をかけることなくコレクションから削除されます。

this.collection.remove作品への切り替え：http： //jsfiddle.net/ambiguous/8chHf/

私がここにいる間、あなたはここに隠れた問題を抱えています：

self = {};

と呼ばれるローカル変数に割り当てる場合は、グローバルself（実際にはの標準プロパティwindow）に割り当てますself。これだけで十分です：

return {
    start: function() {
        new TodoView({collection: new TodoCollection()});
    }
};

または、必要に応じて、次のようにすることもできます。

var self = {};
self.start = function(){
    new TodoView({collection: new TodoCollection()});
};
return self;

を忘れたり、誤って宣言するのを忘れたりした場合に発生する可能性のある興味深いバグのために、_thisまたはthatの代わりに使用することをお勧めします。そして、はい、私はこれを難しい方法で学びました。selfwindow.selfvarvar self;self

于 2012-10-28T20:25:20.720 に答える