0

我正在使用 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 文件只是一个带有“monster”类的空 div。任何能帮助我朝着正确方向前进的事情都将不胜感激！

4

2 回答 2

1

是的，您的怀疑是正确的，'el' 属性是问题所在。

当您在 Backbone.View 类定义中提供“el”值时，该视图的每个实例都将附加到与该类/id 匹配的第一个 DOM 元素。

所以当你创建 3 个 MonsterViews 时，它们都被分配给同一个元素，因此当一个被删除时，所有 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 示例

于 2013-09-22T23:18:37.627 回答
0

试着把它放在底部

$(document).ready(function(){

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

});

我认为这是如何删除/删除视图的好方法..不是

 monsterListView.remove(goblin)
于 2013-09-23T00:51:39.577 回答