0

我想渲染我收藏中的每个服务员，但控制台仍然显示错误：

未捕获的类型错误：无法调用未定义的方法“toJSON”

这是我的代码：

 (function() {

    window.App = {

        Models: {},
        Views: {},
        Collections: {}

    };

    window.template = function(id) {

        return _.template( $('id' + id).html() );

    },

// 服务员模型

    App.Models.Waiter = Backbone.Model.extend({

        defaults: function() {
            return {
                title: 'Waiter Name',
                id: []
            };
        }
    });

// 服务员列表集合

   App.Collections.Waiters = Backbone.Collection.extend({

       model: App.Models.Waiter
   });

// 查看所有服务员

   App.Views.Waiters = Backbone.View.extend({

       tagName: 'ul',

       render: function() {

           this.collection.each(function(waiter) {

               var waiterView = new App.Views.Waiter({ model: waiter });

               this.$el.append(waiterView.render().el);

           }, this);

           return this;
       }
   });

// 一个人的视图

    App.Views.Waiter = Backbone.View.extend({

        tagName: 'li',

        template: _.template("<%= title %><%= id %>"),

        render: function() {

            this.$el.html( this.template(this.model.toJSON()) );

            return this;

        },
    });


       waitersCollection = new App.Collections.Waiters([
           {
               title: 'ferko fristansky',
               id: 2
           },
           {
               title: 'ferko bandaska',
               id: 3
           },
           {
               title: 'fvwerv fristansky',
               id: 4
           }    

       ]);

       var waitersView = new App.Views.Waiter({ collection: waitersCollection });

        $(document.body).append(waitersView.render().el);


})();
4

1 回答 1

1

您正在waiterView使用集合创建您的：

var waiterView = new App.Views.Waiter({ collection: waitersCollection });

但是App.Views.Waiter是基于模型的视图；这意味着this.model它将undefined在您的内部App.Views.Waiter，因此这将失败：

this.$el.html( this.template(this.model.toJSON()) );
// this is undefined -------------^^^^^

您可能想要创建一个App.Views.Waiters：

var waitersView = new App.Views.Waiters({ collection: waitersCollection });

然后，在内部App.Views.Waiters，您App.Views.Waiter将为集合中的每个模型创建一个，而不是一个new App.Views.extend({ model: waiter })：

render: function() {
    this.collection.each(function(waiter) {
        var waiterView = new App.Views.Waiter({ model: waiter });
        this.$el.append(waiterView.render().el);
    }, this);
    return this;
}

顺便说一句，请注意这一点：

App.Models.Waiter = Backbone.Model.extend({
    defaults: {
        title: 'Waiter Name',
        id: []
    }
});

from 的值defaults是浅拷贝的，因此使用这些默认值的所有内容最终都将使用完全相同的id数组，当您有多个模型共享同一个数组时，这可能会导致奇怪的错误id。如果您在 中有可变值defaults，您通常希望使用一个函数来代替，以便每个人都获得自己不同的值：

App.Models.Waiter = Backbone.Model.extend({
    defaults: function() {
        return {
            title: 'Waiter Name',
            id: []
        };
    }
});
于 2013-09-15T22:49:27.270 回答