Backbone.js将模型绑定到视图时出错

Backbone.js Error when binding a model to a view

本文关键字：视图 出错 绑定 js 模型 Backbone      更新时间：2023-09-26

我是Backbone.js的新手，但经过一些研究，我仍然找不到问题的根源。

我正在开发一个应用程序，我有一组模型，我最终想在视图中显示这些模型（一次只显示一个模型）。

这是我迄今为止的代码：

    var App = {
        Item: Backbone.Model.extend({
            defaults: function() {
                return {
                    id: -1,
                    name: '',
                    imageReference: '',
                    itemTags: []
                };
            },
            sync: function()  { return null; },
            fetch: function() { return null; },
            save: function()  { return null; }
        }),
        Items: Backbone.Collection.extend({
            model: this.Item,
        }),
        ItemView: Backbone.View.extend({
            el: "#itemdiv",
            tagName: "<div>",
            className: "item",
            template: _.template($("#template-item-view").html()),
            initialize: function(model) {
                this.model = model;
                this.listenTo(this.model, "change", this.render);
                this.render();
            },
            render: function() {
                this.$el.html(this.template(this.model.toJSON()));
                return this;
            },
        })
    };
    var items = new App.Items();
    items.add(new App.Item({name: "iPhone", id: 1, imageReference: "iPhone.jpg", ["mobile", "smartphone"]}));
    items.add(new App.Item({name: "MacBook", id: 2, imageReference: "MacBook.jpg", ["laptop", "computer"]}));

以上所有工作。当我检查items时，它有两个模型，包括参数。但当我尝试使用Collection.create()直接向Collection添加新项目时，如：

    items.create({name: "Apple Watch", id: 3, imageReference: "AppleWatch.jpg", ["watch", "redundant"]});

它抛出一个错误：

TypeError: undefined is not a constructor (evaluating 'new this.model(attrs, options)')

如果有帮助，这个错误会出现在Backbone.js的第915行（开发版本），包装函数是

/* from Backbone.js, Dev-Version, Line 911-919 */
_prepareModel: function(attrs, options) {
  if (attrs instanceof Model) return attrs;
  options = options ? _.clone(options) : {};
  options.collection = this;
  var model = new this.model(attrs, options);
  if (!model.validationError) return model;
  this.trigger('invalid', this, model.validationError, options);
  return false;
}

我不知道这是一个小错误，还是我的体系结构出了问题。我非常感谢您的帮助以及对最佳实践等的评论。

提前感谢！

添加行中出现错误：

items.add(new App.Item({name: "iPhone", id: 1, imageReference: "iPhone.jpg", ["mobile", "smartphone"]}));
items.add(new App.Item({name: "MacBook", id: 2, imageReference: "MacBook.jpg", ["laptop", "computer"]}));

应为：

items.add(new App.Item({name: "iPhone", id: 1, imageReference: "iPhone.jpg", itemTags: ["mobile", "smartphone"]}));
items.add(new App.Item({name: "MacBook", id: 2, imageReference: "MacBook.jpg", itemTags: ["laptop", "computer"]}));

缺少字段itemTags。这能解决问题吗？

运行以下程序的点：

Items: Backbone.Collection.extend({
    model: this.Item,
}),

this未知。

因此，如果您正在使用名称空间来封装代码，请执行以下操作之一：

var App = {}
App.item = Backbone.Model.extend({...})
App.items = Backbone.Collection.extend({...})
App.itemView = Backbone.View.extend({...})
App.items.add({})
App.items.add({})

或者：

(function() {
    var item = Backbone.Model.extend({...})
    var items = Backbone.Collection.extend({...})
    var itemView = Backbone.View.extend({...})
    var items.add({})
    var items.add({})
})()
相关文章：