1

私はバックボーンとその概念に頭を悩ませようとしています。Backbone.Routerの詳細と、BackboneをRequire.jsと統合する方法を学ぶことができるように、簡単なアプリを作成しました。

このアプリはChrome、IE9、Safariでうまく機能しますが、Firefoxの最新バージョンでは、クリックイベントがトリガーされて消費された後、「TypeError：this.modelisundefined」エラーがスローされます。助けてくれてありがとう！

便宜上、以下のアプリ全体へのリンクを添付しました。

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;

    });

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

    });
4

1 に答える 1

2

問題は、さまざまなブラウザがURLのスペースを処理する方法に関連しています。viewDocumentrouter.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 に答える