0

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

1 回答 1

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 是没有意义的。此外，这将导致您的逻辑不是为视图创建一个新元素，而是在页面中查找一个已经存在的元素。您应该完全删除该行。

你想要的是一个elon RegisterCollectionView。现在你没有将该视图附加到任何东西上，所以它被渲染但不可见。

你应该可以添加这个：

el: 'body'
于 2013-01-01T20:37:03.343 回答