Question

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

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

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

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

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

document.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;

    });

documents.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;

    });

router.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;

    });

Answer 1

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

    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);
    }

仅在Firefox中的Backbone应用程序中的事件后才能获得'this.model未定义'

1 个答案: