骨幹不能從收集

Question

刪除項目我已經寫了以下內容，由於某種原因，當我試圖從它在removeItem函數返回undefined該項目集合中刪除的項目：

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; 

}); 

Answer 1

模型穿上」噸有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（實際上是一個standard property of window）當你可能想分配給一個名爲self的本地變量。就在這個就足夠了：

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

，或者你可以不喜歡這樣，如果你喜歡：

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

我更喜歡使用，因爲有趣的bug _this或that代替self是window.self可能會導致如果你忘記了varvar self;或者你不小心忘記了self。是的，我很難學會這一點。