javascript - Backbone.js 未捕获类型错误 this.model.each 不是函数

Question

好吧，我目前正在学习 Backbone.js 类(class)，其中我必须创建一个包含对象列表和删除按钮的 View ，但我不断收到错误(Uncaught TypeError: this.model.每个都不是函数)，我在下面指出了(//这是抛出错误的地方)。如有任何帮助，我们将不胜感激!

    //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() 对其进行迭代。

此外，我相信您正在混淆模型 View 和 Collection View 。您的vehiclesView本质上是一个 Collection View ，应该接收模型集合。然后，它的工作是为 Vehicles 集合中的每个 Vehicle 模型实例化、渲染和附加一个 vehicleView(模型 View )。

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

然后确保使用模型实例化集合，并通过将所述集合传递到 Collection View 来实例化 Collection View 。

// 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();