Javascript Backbone.js集合视图在控制台中格式正确，但未显示在Dom中

我正在处理我的第一个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();

var RegisterModel=Backbone.Model.extend({
urlRoot:'api/process.php'
});
var RegisterView=Backbone.View.extend({
el:“注册”，
模板：u.模板（“”），
render:function（）{
this.el.html（this.template（this.model.toJSON（））；
归还这个；
}
});
var RegisterCollection=Backbone.Collection.extend（{
型号：RegisterModel
});
var RegisterCollectionView=Backbone.View.extend({
初始化：函数（）{
this.collection.on（'add'，this.addOne，this）；
this.collection.on（'reset'，this.addAll，this））；
},  
addOne:函数（registerModel）{
var registerView=newregisterview（{model:registerModel}）；
这是.el.append（registerView.render（）.el）；
},
addAll:function（）{
this.collection.forEach（this.addOne，this）；
这个。$el.empty（）；
},
render:function（）{
这是addAll（）；
归还这个；
}
});
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（）；

此处：

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",

这是错误的。您有多个RegisterViews，因此在其上使用ID是没有意义的。此外，这将导致逻辑查找页面中已有的元素，而不是为视图创建新元素。你应该完全去掉那条线

您需要的是

registercollection视图

上的

el

。现在，您没有将该视图附加到任何对象，因此它被渲染但不可见

您应该能够添加以下内容：

el: 'body'

---

不。没有控制台错误或警告。这是一个很好的观点，但它似乎没有解决视图问题。我现在正在浏览文档，但我不确定还有什么地方可以定义$el以使应用程序显示在正确的位置。明白了，我将$el行移到了主集合视图，从模型视图中移出。谢谢