백본보기를 제거 할 때 문제가 발생했습니다.

Question

코드 스쿨 백본 자습서의 코드로 놀고 있습니다. 예제에서 사용하고있는 코드 중 일부는 자신의 목적에 맞도록 수정 한 것 같습니다. . 기본적으로 컬렉션에 새 모델을 추가하기 위해 리스너를 추가했습니다.이 모델은 잘 작동하지만 제거 리스너를 추가하면 내 뷰가 모두 삭제 된 것 같습니다. 문제는 "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 파일 클래스 '괴물'그냥 빈 사업부입니다 : 여기

는 코드입니다. 올바른 방향으로 나를 조종하는 데 도움이되는 모든 것이 크게 감사 할 것입니다!

Answer 1

예, 귀하의 의혹은 정확하며 'el'속성이 문제입니다.

Backbone.View 클래스 정의의 일부로 'el'값을 제공하면 해당보기의 모든 인스턴스가 해당 클래스/ID와 일치하는 첫 번째 DOM 요소에 연결됩니다.

그래서 MonsterView 3 개를 만들면 모두 동일한 요소에 할당되므로 하나가 제거되면 3 개가 모두됩니다.

이 문제를 해결하려면 MonsterView 클래스에서 'el'설정을 제거하고 대신 새 인스턴스마다 고유 한 'el'참조를 전달하십시오.

는 아래 addOne 방법 확인 :이 삭제하는 방법은 좋은 방법이라고 생각 하단

$(document).ready(function(){ 

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

}); 

에서이 넣어

// 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

시도/보기를 제거하십시오 .. 아니요

monsterListView.remove(goblin)