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

Question

我是 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() 将新项目直接添加到集合中时，例如：

    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行（dev版），wrapping function是

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

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

提前致谢！

Answer 1

您的添加行有误：

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({})
})()

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

Backbone.js Error when binding a model to a view

javascript

runtime-error

backbone.js

backbone-views

backbone-model