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'

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

1 个答案: