Question

我正在使用Code School Backbone教程中的代码，我从他们的示例中使用的一些代码，我已经根据自己的目的进行了调整，似乎没有用。基本上，我添加了一个监听器来添加一个新的模型到一个集合，这很好，但是当我添加了删除监听器时，它似乎删除了我的所有视图。我认为这个问题与我所看到的“el：'。bulletter'有关，但我还没有想出正确的组合来修复它。

以下是代码：

// 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类定义的一部分时，该View的每个实例都将附加到与该类/ 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)

删除骨干视图时遇到问题

2 个答案: