Backbone.js 컬렉션보기 콘솔에서 제대로 형식이 지정되었지만 Dom에 표시되지 않음

Question

나는 처음으로 backbone.js 문제를 해결하고 있으며 컬렉션을 사용하는 데 어려움이 있습니다. 콘솔에서 볼 때, 문제는 컬렉션 뷰를 DOM으로 출력하는 것으로 보인다. 콜렉션 데이터는 콘솔에서 올바르게 형식화되어 브라우저에 나타나지 않습니다. 나는 내가 뭘 잘못 알아낼 수 없습니다 : 여기

var RegisterModel = Backbone.Model.extend({ 
    urlRoot: 'api/process.php' 
}); 

var RegisterView = Backbone.View.extend({ 
    el: "#register", 
    template: _.template('<label for="<%= inputName %>"><%= label %></label><input name="<%= inputName %>" type="text" />'), 
    render: function() { 
     this.$el.html(this.template(this.model.toJSON())); 
     return this; 
    } 
}); 

var RegisterCollection = Backbone.Collection.extend({ 
    model: RegisterModel 
}); 

var RegisterCollectionView = Backbone.View.extend({ 
    initialize: function(){ 
     this.collection.on('add', this.addOne, this); 
     this.collection.on('reset', this.addAll, this); 
    }, 
    addOne: function(registerModel){ 
     var registerView = new RegisterView({model: registerModel}); 
     this.$el.append(registerView.render().el); 
    }, 
    addAll: function(){ 
     this.collection.forEach(this.addOne, this); 
     this.$el.empty(); 
    }, 
    render: function(){ 
     this.addAll(); 
     return this; 
    } 
}); 


var registerCollection = new RegisterCollection(); 
var todos = [{inputName: "first_name", label: "First Name"}, {inputName: "last_name", label: "Last Name"}]; 
registerCollection.reset(todos); 


var registerCollectionView = new RegisterCollectionView({collection: registerCollection}); 
registerCollectionView.render(); 

Answer 1

:

addAll: function(){ 
    this.collection.forEach(this.addOne, this); 
    this.$el.empty(); 
}, 

각 항목을 렌더링 한 후 empty()을 요구하고있다. 나는 당신이 그 두 줄을 서로 바꿔야한다는 것을 의미한다고 가정합니다.

addAll: function(){ 
    this.$el.empty(); 
    this.collection.forEach(this.addOne, this); 
}, 

는 또한이 :

el: "#register", 

은 잘못된 것입니다. 여러 개의 RegisterView가 있으므로 ID를 사용하는 것은 의미가 없습니다. 또한 뷰의 새 요소를 만드는 대신 페이지에 이미있는 요소를 찾는 논리를 만듭니다. 해당 행을 완전히 제거해야합니다.

원하는 것은 el (RegisterCollectionView)입니다. 지금 당장 당신은 아무것도보기에 붙이지 않으므로 렌더링되지만 보이지 않습니다.

el: 'body'