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

时间:2015-04-08 10:51:28

标签: javascript backbone.js runtime-error backbone-views backbone-model

我是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)')

如果它有帮助,这个错误出现在第915行(开发版)的Backbone.js中,包装函数是

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

我无法弄清楚这只是一个小错误,还是我的架构错误。非常感谢您的帮助以及对最佳实践的评论等。

提前致谢!

1 个答案:

答案 0 :(得分: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({})
})()