在我看来没有方法“toJSON”错误

Question

我正在学习backbone.js，并且正在构建我的第一个多模块应用程序。我遇到了一个我以前从未见过的错误，我想我知道原因，但我不知道如何解决它。我相信这是因为模型实际上还不能用于视图，但我不明白为什么。

错误是：

Uncaught TypeError: Object function (){ return parent.apply(this, arguments); } 没有方法“toJSON”

这是我认为的第 11 行 msg.App.MessageListItemView。

这是我的模型：

var msgApp = msgApp || {};

msgApp.Message = Backbone.Model.extend();

这是我的收藏：

var msgApp = msgApp || {};

msgApp.MessageCollection = Backbone.Collection.extend({
    model: msgApp.Message,
    url: MESSAGES_API // Call to REST API with Tastypie
});

这是我的列表视图：

var msgApp = msgApp || {};

msgApp.MessageListView = Backbone.View.extend({

    el: '#gps-app',

    initialize: function() {

        this.collection = new msgApp.MessageCollection();
        this.collection.fetch({reset: true});
        this.render();
        this.listenTo( this.collection, 'reset', this.render );

    },

    // render messages by rendering each message in it's collection
    render: function() {

        this.collection.each(function(item){
            this.renderMessage(item);
        }, this);
    },

    // render a message by creating a MessageView and appending the the element it renders to the messages element
    renderMessage: function(item) {
        var messageView = new msgApp.MessageListItemlView({
            model: msgApp.Message
        });
        this.$el.append(messageView.render().el);
    }

});

这是我的项目视图：

var msgApp = msgApp || {};

msgApp.MessageListItemlView = Backbone.View.extend({

    tagName: 'li',
    className: 'message-list-item',
    template: _.template($('#messageListItem').html()),

    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    }

});

这是我的路由器：

var AppRouter = Backbone.Router.extend({

    routes: {
        'messages/': 'allMessages',
    },

    allMessages:function() {
        this.messageList = new msgApp.MessageCollection();
        this.messageListView = new msgApp.MessageListView({model:this.messageList});
        console.log('I got to messages!');
    },

 });

var app_router = new AppRouter;

我正在寻找所有建议。我一开始是个菜鸟，这是我的第一个多模块应用程序，所以我认为在管理范围时遇到了一些麻烦。

感谢您的宝贵时间！

Answer 1

尝试在 msgApp.MessageListView 中更改 model: msgApp.Message，如下所示：

// render a message by creating a MessageView and appending the the element it renders to the messages element
renderMessage: function(item) {
    var messageView = new msgApp.MessageListItemlView({
        model: item
    });
    this.$el.append(messageView.render().el);
}

视图中的模型参数不期望模型类型，而是某些模型的实例。希望这会有所帮助。