移除主幹視圖時遇到的問題

Question

我正在使用Code School Backbone教程中的代碼，並且我從他們的示例中使用了一些代碼，這些代碼已適用於我自己的目的似乎不起作用。基本上，我添加了一個監聽器來添加一個新的模型到集合中，這很好，但是當我添加了刪除監聽器時，它似乎刪除了我的所有視圖。我認爲這個問題與我認爲的「el：'.monster'」有關，但我沒有找到合適的組合來解決它。

下面是代碼：

// MODEL 
var Monster = Backbone.Model.extend({ 
    defaults: { 
     name: '', 
     health: '', 
     defense: '', 
     attack: '', 
     damage: '' 
    } 
}); 

// COLLECTION 
var MonsterList = Backbone.Collection.extend({ 
    model: Monster, 
    url: '/monsters', 
    initialize: function() { 
     this.on('remove', this.hideModel); 
    }, 
    hideModel: function(model) { 
     model.trigger('hide'); 
    } 
}); 

var monsterList = new MonsterList(); 

var monsters = [ 
    {name: 'Gobby', health: 10, defense: 10, attack: 5, damage: 4}, 
    {name: 'Clobber', health: 15, defense: 10, attack: 7, damage: 4}, 
    {name: 'Gumms', health: 9, defense: 10, attack: 5, damage: 2} 
]; 

monsterList.reset(monsters); 

// VIEW 

var MonsterView = Backbone.View.extend({ 
    el: '.monster', 
    template: _.template('<table>' + 
     '<th><%= name %></th>' + 
     '<tr><td>Health</td> <td><%= health %></td>' + 
     '<td>Defense</td><td><%= defense %></td></tr>' + 
     '<tr><td>Attack</td><td><%= attack %></td>' + 
     '<td>Damage</td><td><%= damage %></td><tr>' + 
     '</table>' 
     ), 
    initialize: function() { 
     this.model.on('hide', this.remove, this); 
    }, 
    remove: function() { 
     this.$el.remove(); 
    }, 
    render: function(){ 
     this.$el.append(this.template(this.model.toJSON())); 
    } 
}); 

var MonsterListView = Backbone.View.extend({ 
    initialize: function() { 
     this.collection.on('add', this.addOne, this); 
     this.collection.on('reset', this.addAll, this); 
    }, 
    addOne: function(monster) { 
     var monsterView = new MonsterView({model: monster}); 
     this.$el.append(monsterView.render()); 
    }, 
    addAll: function() { 
     this.collection.forEach(this.addOne, this); 
    }, 
    render: function() { 
     this.addAll(); 
    } 
}); 

var monsterListView = new MonsterListView({collection: monsterList}); 
monsterListView.render(); 

HTML文件只是一個空div與類 '怪物'。任何幫助引導我朝着正確的方向的東西將不勝感激！

Answer 1

是的，您的懷疑是正確的，'el'屬性是問題。

當您爲'Backbone.View類定義的一部分提供'el'的值時，該視圖的EVERY實例將附加到與該類/ id相匹配的第一個DOM元素。

所以當你創建3個MonsterView時，它們全部被分配到相同的元素，因此當一個被移除時，所有3個都是。

要解決這個問題，請從MonsterView類中刪除'el'設置，併爲每個新實例傳遞一個唯一的'el'引用。

檢查以下addOne方法：

// MODEL 
var Monster = Backbone.Model.extend({ 
    defaults: { 
     name: '', 
     health: '', 
     defense: '', 
     attack: '', 
     damage: '' 
    } 
}); 

// COLLECTION 
var MonsterList = Backbone.Collection.extend({ 
    model: Monster, 
    url: '/monsters', 
    initialize: function() { 
     this.on('remove', this.hideModel); 
    }, 
    hideModel: function(model) { 
     model.trigger('hide'); 
    } 
}); 

var monsterList = new MonsterList(); 

var monsters = [ 
    {name: 'Gobby', health: 10, defense: 10, attack: 5, damage: 4}, 
    {name: 'Clobber', health: 15, defense: 10, attack: 7, damage: 4}, 
    {name: 'Gumms', health: 9, defense: 10, attack: 5, damage: 2} 
]; 

monsterList.reset(monsters); 

// VIEW 

var MonsterView = Backbone.View.extend({ 

    template: _.template('<table>' + 
     '<th><%= name %></th>' + 
     '<tr><td>Health</td> <td><%= health %></td>' + 
     '<td>Defense</td><td><%= defense %></td></tr>' + 
     '<tr><td>Attack</td><td><%= attack %></td>' + 
     '<td>Damage</td><td><%= damage %></td><tr>' + 
     '</table>' 
     ), 
    initialize: function() { 
     this.model.on('hide', this.remove, this); 
    }, 
    remove: function() { 
     this.$el.remove(); 
    }, 
    render: function(){ 
     this.$el.html(this.template(this.model.toJSON())); 
    } 
}); 

var MonsterListView = Backbone.View.extend({ 
    el: '#monsterList', 
    initialize: function() { 
     this.collection.on('add', this.addOne, this); 
     this.collection.on('reset', this.addAll, this); 
    }, 
    addOne: function(monster) { 
     var newEl = this.$el.append('<div></div>');    
     var monsterView = new MonsterView({model: monster, el: newEl}); 
     monsterView.render(); 
    }, 
    addAll: function() { 
     this.collection.forEach(this.addOne, this); 
    }, 
    render: function() { 
     this.addAll(); 
    } 
}); 

var monsterListView = new MonsterListView({collection: monsterList}); 
monsterListView.render(); 

JS Bin Example

Answer 2

嘗試把這個底部

$(document).ready(function(){ 

monsterList.remove(monsterList.at(2)); 
var monsterListView = new MonsterListView({collection: monsterList}); 
monsterListView.render(); 

}); 

我認爲這是對如何刪除好方法/刪除視圖..不是

monsterListView.remove(goblin)