javascript - Backbone - 简单的 Collection View - 无法打印项目

Question

这是一个非常简单的问题。我正在尝试打印集合中学生模型的每个实例。 printData 函数中有一行:this.$el.append(model_view.el); 我认为我遗漏了一些东西。完整的 JSFiddle 示例 here .

// Model
var Student = Backbone.Model.extend({
    defaults: {
        name: '',
        age: '',
        major: '',
    }
});

// Collection
ExampleCollection = Backbone.Collection.extend({
    model: Student
});

// Model View
var ModelView = Backbone.View.extend({
    el: $('.example-content'),
    template: _.template( $('#example-target').html() ),

    render: function(){
        var studentTemplate = this.template(this.model.toJSON());
        this.$el.html(studentTemplate);
    }
});

// Collection View
var CollectionView = Backbone.View.extend({
    render: function(){
        this.collection.each(this.printData, this);
        return this;
    },
    printData: function(target){
        var model_view = new ModelView({ model: target });
        this.$el.append(model_view.el);
    }
});

var matt = new Student({name: 'Matt', age: 32, major: 'French'});
var nick = new Student({name: 'Nick', age: 27, major: 'Science'});
var ellen = new Student({name: 'Ellen', age: 63, major: 'Geriatrics'});

var studentList = new ExampleCollection([matt, nick, ellen]);

var collection_view = new CollectionView({ collection: studentList });
collection_view.render();

Answer 1

嗯，您的 CollectionView 没有指定“el”，因此您不应该尝试向其中附加任何内容。您的 ModelView 会将其自身放置在页面上，您无需对它们执行任何其他操作。

现在，您遇到了语法错误:去掉您指定的那一行中的 .el 。事实上，修复该行的最简单方法是简单地对集合中的每个 Students 调用 render() 并停止尝试将它们附加到某些内容。

我相信您正在尝试显示所有项目，而不仅仅是一个项目，因此每个项目都应该将自己附加到其父元素...调用 .append(studentTemplate)，而不是.html(studentTemplate).

参见fiddle