Backbone.js 未捕获的类型错误 this.model.each 不是一个函数

Question

好的，所以我目前正在学习 Backbone.js 的课程，其中我必须创建一个包含对象列表的视图和一个删除按钮，但我不断收到错误消息（未捕获的类型错误： this.model.each 不是一个函数）我在下面指出（//这是抛出错误的地方）。对此的任何帮助表示赞赏！

    //BACKBONE MODEL//
var Vehicle = Backbone.Model.extend( {
    idAttribute: "registrationNumber",

    urlRoot: "/api/vehicles",

    start: function() {
        console.log("Vehicle started.");
    }

});

//BACKBONE MODEL//
var Car = Vehicle.extend( {
    start: function() {
        console.log("Car with registration number XLI887 started.");
    },

    validate: function(attrs) {
        if (!attrs.registrationNumber)
            return "Registration number is required.";
    }
});

var car = new Car({ registrationNumber: "XLI887", color: "Blue" });
car.start();

//BACKBONE COLLECTION//
var Vehicles = Backbone.Collection.extend({
    model: Vehicle,
});

var vehicles = new Vehicles([
    new Vehicle({ car: "Car 1", registrationNumber: "XLI887", color: "Blue"}),
    new Vehicle({ car: "Car 2", registrationNumber: "ZNP123", color: "Blue"}),
    new Vehicle({ car: "Car 3", registrationNumber: "XUV456", color: "Gray"})
]);

var blueCars = vehicles.where({ color: "Blue" });

console.log("Blue Cars", blueCars);

var carRegNumb = vehicles.findWhere({ registrationNumber: "XLI887" });

console.log("Car Reg Numb", carRegNumb);

vehicles.remove(carRegNumb);

vehicles.each(function(vehicle){
    console.log(vehicle);
});

//BACKBONE VIEW//
var VehicleView = Backbone.View.extend({
        tagName: "li",
        className: "vehicle",
        id: "registrationNumber",
        attributes: {
        "data-color": "Blue"
},

        render: function(){
        this.$el.html(this.model.get("car"));

        return this;
    },

    events: {
        "click": "onClick",
        "click .delete": "onClickDelete",
    },

    onClick: function(){
        console.log("Delete Clicked");
    },

    onClickDelete: function(e){
        console.log("Delete Clicked");
    },

    render: function(){
        this.$el.html(this.model.get("car") + " <button>Delete</button>");

        return this;
    }

});

//BACKBONE VIEW//
var VehiclesView = Backbone.View.extend({
    tagName: "ul",
    className: "vehicle",

    id: "registrationNumber",
    attributes: {
        "data-color": "Blue"
    },

    render: function(){
        var self = this;


        this.model.each(function(vehicle){     //THIS IS WHERE THE ERROR IS BEING THROWN
            var vehiclesview = new VehiclesView({ model: car });
            self.$el.append(vehiclesview.render().$el);
        });

        return this;
    }
});

var vehicles = new Vehicles([
    new Vehicle({ car: "Car 1", registrationNumber: "XLI887" }),
    new Vehicle({ car: "Car 2", registrationNumber: "ZNP123" }),
    new Vehicle({ car: "Car 3", registrationNumber: "XUV456" })
    ]);

var vehicleView = new VehicleView({ el: "#vehicles", model: car });
vehicleView.render();

var vehiclesView = new VehiclesView({ el: "#vehicles", model: car});
vehiclesView.render();

Answer 1

在我看来，您收到错误是因为您将模型实例而不是集合实例传递给 vehiclesView。因为 car 模型实例不是数组，所以不能使用 each().

对其进行迭代

我还认为您混淆了模型视图和集合视图。您的 vehiclesView 本质上是一个集合视图，应该接收一个模型集合。然后，它的工作是为 Vehicles 集合中的每个 Vehicle 模型实例化、渲染和附加一个 vehicleView（模型视图）。

// Vehicles Collection View.
var VehiclesView = Backbone.View.extend({
    tagName: 'ul',

    className: 'vehicle',

    id: 'registrationNumber',

    attributes: {
        data-color: 'Blue'
    },

    render: function () {

        // This is a collection view, therefore access your data by
        // referencing `this.collection` and NOT `this.model`.
        this.collection.each(function (vehicleModel) {

            // Instantiate a model view for each model in your collection.
            var vehicleView = new VehicleView({
                model: vehicleModel
            });

            // Render and append the `vehicleView`
            this.$el.append(vehicleView.render().$el);
        }, this);

        return this;
    }
});

然后确保使用您的模型实例化一个集合，并通过将所述集合传递到集合视图来实例化您的集合视图。

// Instantiate a collection.
var vehicles = new Vehicles([
    new Vehicle({ car: 'Car 1', registrationNumber: 'XLI887' }),
    new Vehicle({ car: 'Car 2', registrationNumber: 'ZNP123' }),
    new Vehicle({ car: 'Car 3', registrationNumber: 'XUV456' })
]);

// Pass the collection to the vehicles collection view.
var vehiclesView = new VehiclesView({
  collection: vehicles  // Passing in a collection and NOT a model.
});

// Render the vehicles collection view.
vehiclesView.render();

Backbone.js 未捕获的类型错误 this.model.each 不是一个函数

Backbone.js Uncaught TypeError this.model.each is not a function

javascript

jquery

backbone.js