백본보기가 다른 인스턴스를 제거합니다

Question

backbone.js를 테스트 할 때 문제가 발생했습니다. 페이지에서 여러 번 사용할 수있는 일반화 된보기를 만드는 방법은 무엇입니까?

현재 구현에서는 FooControls보기가 Jquery의 append을 사용하여 다른 두 가지보기에 사용됩니다.

그러나 사용 된 beeing 만 끝나고 마지막보기에서 DOM에 추가됩니다.

JSBin, 내 문제를 재현. http://jsbin.com/kopos/1/edit 는 (붉은 광장은 FooControls보기,이 두 개의 빨간색 사각형 안가? 나타냄)

이 어떻게 한 페이지에 여러 번 사용할 수있는 뷰를 만드는 방법에 대해 갈 것 ?

Answer 1

이 대신 (jsbin example 참조)보십시오 :

var FooControls = Backbone.View.extend({ 
    className: 'foo-control' 
}); 
var ScreenView = Backbone.View.extend({ 
    className: 'screen', 
    render: function() { 
     var fooOne = new FooControls(); 
     this.$el.append(fooOne.$el); 
    } 
}); 
var FileView = Backbone.View.extend({ 
    className: 'files', 
    render: function() { 
     var fooTwo = new FooControls(); 
     this.$el.append(fooTwo.$el); 
    } 
}); 

var screenInstance = new ScreenView(); 
var fileInstance = new FileView(); 
screenInstance.render(); 
fileInstance.render(); 
$('#wrapper').append(screenInstance.$el); 
$('#wrapper').append(fileInstance.$el); 

은 렌더링 문제없이, className 당신에게 당신이 찾고있는 것 같았다 같은 기능을 얻을 사용. 이것의 원인이 무엇인지

var FooControls = Backbone.View.extend({ 
    className: 'foo-control' 
}); 
var ScreenView = Backbone.View.extend({ 
    className: 'screen', 
    render: function() { 
     var fooOne = new FooControls(); 
     this.$el.append(fooOne.$el); 
     return this; 
    } 
}); 
var FileView = Backbone.View.extend({ 
    className: 'files', 
    render: function() { 
     var fooTwo = new FooControls(); 
     this.$el.append(fooTwo.$el); 
     return this; 
    } 
}); 

var screenInstance = new ScreenView(), 
    fileInstance = new FileView(); 

$('#wrapper') 
    .append(screenInstance.render().$el); 
    .append(fileInstance.render().$el);