未捕获的TypeError：this.model.toArray不是函数

Question

我正在尝试使用已添加的数据打印编辑和删除按钮。

模型：

var Food = Backbone.Model.extend({

    defaults: {
        fooddisplay: '',
        quantity: '',
        url: ''
    }

});

采集：

var Foods = Backbone.Collection.extend({

});


/*var f1 = new Food({
    fooddisplay: 'bonay',
    quantity: 'poultry\'s',
    url: 'http://eggpoultry.com'
});

var f2 = new Food({
    type: 'manok',
    quantity: 'two manok\'s',
    url: 'http://heneralmanok.com'
});*/

var fs = new Foods();

视图：

更新：现在一切正常

var FoodView = Backbone.View.extend({
    model: new Food(),
    tagName: 'tr',
    initialize: function() {
        this.template = _.template($('.food-list-temp').html());
    },
    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
        return this;

    }
});

var FoodsView = Backbone.View.extend({
    model: Foods,
    el: $('.food-list'),
    initialize: function() {
        this.model.on('add', this.render(), this);
    },
    render: function() {
        var self = this;
        this.$el.html('');
        this.model.each(function(food) {
            self.$el.append((new FoodView({model: food})).render().$el);
        });
        return this;
    }
});

var FoodsView = new FoodsView();

添加功能：

$(document).ready(function() {
    $('.add-food').on('click', function() {
        var f = new Food({
            fooddisplay: $('.fooddisplay-input').val(),
            quantity: $('.quantity-input').val(),
            url: $('.url-input').val()
        });
        console.log(f.toJSON());
        f.add(fs);
    });
});

问题是，它说this.model.toArray不是一个函数。我不知道我在这里做错了什么。如果你回答世界上最伟大的程序员，请提前感谢。

Answer 1

this.model应该已经是一个你不需要toArray的数组

 this.model.each(function(food) {
     self.$el.append((new FoodView({model: food})).render().$el);
  });

您需要执行以下操作以在集合更改时呈现视图

 var FoodsView = Backbone.View.extend({
    model: Foods,
    el: $('.food-list'),
    initialize: function() {
        this.listenTo(this.model, 'add', this.render);
    },
   //......