Uncaught 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);
    },
   //......