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 ファイルは、「モンスター」クラスの空の div です。私を正しい方向に導くのに役立つものは何でも大歓迎です!

4

2 に答える 2

1

はい、あなたの疑いは正しいです。「el」プロパティが問題です。

Backbone.View クラス定義の一部として「el」の値を指定すると、そのビューのすべてのインスタンスが、そのクラス/ID に一致する最初の DOM 要素にアタッチされます。

したがって、3 つの MonsterView を作成すると、それらはすべて同じ要素に割り当てられるため、1 つを削除すると 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 ビンの例

于 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 に答える