Проблема с удалением заднего плана

Question

Я играю с кодом из учебного пособия по школьной программе Code School, а некоторые из кода, который я использую из своих примеров, которые я адаптировал для своих целей, похоже, не работают , В основном, я добавил слушателя, чтобы добавить новую модель в коллекцию, которая отлично работает, но когда я добавил слушателя удаления, он, похоже, удалит все мои представления. Я думаю, что проблема связана с «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' является проблемой.

Когда вы укажете значение для 'el' как часть вашего определения Backbone.View, каждый экземпляр этого представления будет прикреплен к первому элементу DOM, который соответствует этому классу/id.

Итак, когда вы создаете 3 MonsterViews, все они назначаются одному элементу, и, таким образом, когда один из них удаляется, все 3 являются.

Чтобы исправить это, удалите параметр «el» из класса MonsterView и вместо этого передайте уникальную ссылку «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)