1

我试图了解 Backbone 和它的概念。我制作了一个简单的应用程序，以便我可以学习如何更多地了解 Backbone.Router 以及如何将 Backbone 与 Require.js 集成。

该应用程序在 Chrome、IE9 和 Safari 中运行良好，但在最新版本的 Firefox 中，它在触发和消耗点击事件后抛出“TypeError：this.model is undefined”错误。非常感谢您的帮助！

为方便起见，我在下面附上了整个应用程序的链接。

https://dl.dropbox.com/u/19138757/Backbone_Example.zip

我将评论发生错误的方法：

文档.js

    define([
        'jquery',
        'underscore',
        'backbone',
        'app'
    ], function ($, _, Backbone, app) {

        var DocumentListView = Backbone.View.extend({
            tagName: 'li',

            events: {
                'click': function () {
                    app.aggregator.trigger('document:selected', this.model);
                }
            },

            render: function () {
                this.$el.html(this.model.get('title'));
                return this;
            }
        });

        return DocumentListView;

    });

文档.js

    define([
        'jquery',
        'underscore',
        'backbone',
        'data/documents',
        'app',
        'text!templates/documents.html'
    ], function ($, _, Backbone, documents, app, documentTemplate) {

        app.aggregator.on('document:selected', function (document) {

            var urlPath = 'view/' + document.get('title');

            app.router.navigate(urlPath, { trigger: true });

        });

        DocumentView = Backbone.View.extend({
            el: $('#my-container'),

            template: _.template(documentTemplate),   

            events: {
                'click h1': 'sayHello'
            },

            // This is the method where the error is occuring. 
            // this.model is undefined...but ONLY in Firefox
            render: function () {
                this.$el.empty().append(this.template(this.model.toJSON()));
                return this;
            },

            sayHello: function () {
                this.input = this.$('.message');
                alert(this.input.val());
            }

        });

        return DocumentView;

    });

路由器.js

        define([
        'jquery',
        'underscore',
        'backbone',
        'data/documents',
        'views/contents',
        'views/document'

    ], function( $, _, Backbone, documents, ContentsView, DocumentView ){

        var DocumentRouter = Backbone.Router.extend({
            routes: {
                'contents': 'contents',
                'view/:title': 'viewDocument'
            },

            contents: function(){
                $('body').html(new ContentsView({collection: documents}).render().el);
            },

            viewDocument: function(title){

                //get a single document instance by title and then pass into DocumentView
                var selectedDocument = _(documents).find(function(document){
                    return document.get('title') === title;
                });

                $('body').empty().append(new DocumentView({model: selectedDocument}).render().el);
            }
        });

        return DocumentRouter;

    });
4

1 回答 1

2

您的问题与不同浏览器如何处理 URL 中的空格有关。viewDocument将router.js 中的函数更改为以下内容：

    viewDocument: function(title){
        // ADD THIS LINE
        title = decodeURIComponent(title);

        //get a single document instance by title and then pass into DocumentView
        var selectedDocument = _(documents).find(function(document){
            return document.get('title') === title;
        });

        $('body').empty().append(new DocumentView({model: selectedDocument}).render().el);
    }
于 2013-01-03T17:46:27.377 回答