Backbone.js和router.navigate

Question

I'm trying to improve the navigation of my little backbone application. Right now I just have some simple navigation using html links that use to #path/to/page in the href element.

What I'm running into is when I click on one of these and then click the back button, the page doesn't refresh properly, and the HTML content doesn't change. So I'm trying to incorporate the navigate functionality into my code.

The issue I'm running into is that I can't find an example that matches the code layout I'm currently using, and I don't understand how backbone works enough to adapt the things I find into something useful.

Here's what I've got:

app.js - called from the index.html file

require.config({

    baseUrl: 'js/lib',

    paths: {
        app: '../app',
        tpl: '../tpl',
        bootstrap: 'bootstrap/js/',

    },

    shim: {
        'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },
        'underscore': {
            exports: '_'
        }
    }
});

require([
    'jquery', 
    'backbone', 
    'app/router',
], function ($, Backbone, Router) {
    var router = new Router();
    Backbone.history.start();
});

app/router.js - instantiated in app.js

define(function (require) {

    "use strict";

    var $           = require('jquery'),
        Backbone    = require('backbone'),
        WindowView   = require('app/views/Window'),

        breadcrumbs = {"Home": ""},
        $body = "",
        $content = "",
        windowView = "";

    return Backbone.Router.extend({

        initialize: function () {
            require([], function () {
                $body = $('body');
                windowView = new WindowView({el: $body}).render();
                $content = $("#content", windowView.el);
            });
        },

        routes: {
            ''                                                : 'home',
            'profile/login(/)'                                : 'candidateProfileLogin',
            'profile/manage(/)'                               : 'candidateProfileLogin',
            'profile/manage/:id(/)'                           : 'candidateProfileHome',
            'profile/manage/:id/questionnaire/:page(/)'       : 'candidateProfileQuestionnaire',
            'profile/manage/:id/:section(/)'                  : 'candidateProfileSection',
        },

        home: function (){
        },

        candidateProfileLogin: function () {
            require(['app/views/CandidateLogin'], function (CandidateLoginView) {
                console.log(Backbone.history.fragment);
                var view = new CandidateLoginView({el: $content});
                view.render();
            });
        },

        candidateProfileHome: function (id) {
            require(["app/views/Candidate", "app/models/candidate"], function (CandidateView, models) {
                var candidate = new models.Candidate({id: id});
                candidate.fetch({
                    success: function (data) {
                        var view = new CandidateView({model: data, el: $content});
                        view.render();
                    },
                    error: function (data) {
                        var view = new CandidateView({model: data, el: $content});
                        view.render();
                    }
                });
            });
        },

        candidateProfileSection: function (id, section) {
            require(["app/views/Candidate", "app/models/candidate"], function (CandidateView, models) {

                var candidate = new models.Candidate({id: id});
                candidate.fetch({
                    success: function (data) {
                        var view = new CandidateView({model: data, el: $content});
                        view.render(section);
                    },
                    error: function (data) {
                        //Output the data to the console. Let the template take care of the error pages
                        console.log(data);
                        var view = new CandidateView({model: data, el: $content});
                        view.render();
                    }
                });
            });
        },

        candidateProfileQuestionnaire: function (id, page) {
            require(["app/views/Candidate", "app/models/candidate"], function (CandidateView, models) {
                var candidate = new models.Candidate({id: id});
                candidate.fetch({
                    success: function (data) {
                        var view = new CandidateView({model: data, el: $content});
                        view.render(page);
                    },
                    error: function (data) {
                        //Output the data to the console. Let the template take care of the error pages
                        console.log(data);
                        var view = new CandidateView({model: data, el: $content});
                        view.render();
                    }
                });
            });
        },
    });
});

app/views/Candidate.js - My view I'm trying to process the clicks

define(function (require) {

    "use strict";

    var $                     = require('jquery'),
        _                     = require('underscore'),
        Backbone              = require('backbone'),
        tpl                   = require('text!tpl/Candidate.html'),
        template              = _.template(tpl),

        CandidateErrorView    = require('app/views/CandidateError'),
        errtpl                = require('text!tpl/CandidateError.html'),
        errTemplate           = _.template(errtpl);

    return Backbone.View.extend({

        events: {
            'submit #voters-guide-personalInfo': 'savePersonalInfo',
            'submit #voters-guide-essay'       : 'saveEssay',
            'submit #voters-guide-survey'      : 'saveSurvey',
            'submit #voters-guide-endorsements': 'saveEndorsements',
            'submit #voters-guide-photo'       : 'savePhoto',

            'click #table-of-contents a' : 'navTOC',
        },

        savePersonalInfo: function (event) {
            console.log(event);
        },

        saveEssay: function (event) {
            console.log(event);
        },

        saveSurvey: function (event) {
            console.log(event);
        },

        saveEndorsements: function (event) {
            console.log(event);
        },

        savePhoto: function(event) {
            console.log(event);
        },

        navTOC: function (event) {
            console.log(event.target);
            var id   = $(event.target).data('candidate-id');
            var path = $(event.target).data('path');
            //router.navigate("profile/manage/" + id + "/" + path, {trigger: true});
        },

        render: function (page) {
            //Check to see if we have any errors
            if (!this.model.get('error')) {
                var dataToSend = {candidate: this.model.attributes};

                switch(page) {
                    case 'personalInfo':
                        template = _.template(require('text!tpl/Candidate-personalInfo.html'));
                    break;

                    case 'essay':
                        template = _.template(require('text!tpl/Candidate-essay.html'));
                    break;

                    case 'survey':
                        template = _.template(require('text!tpl/Candidate-survey.html'));
                    break;

                    case 'endorsements':
                        template = _.template(require('text!tpl/Candidate-endorsements.html'));
                    break;

                    case 'photo':
                        template = _.template(require('text!tpl/Candidate-photo.html'));
                    break;

                    default:
                    break;
                }

                this.$el.html(template(dataToSend));
                return this;
            } else {
                this.$el.html(errTemplate({candidate: this.model.attributes}));
                return this;
            }
        }
    });
});

Now, in an attempt to stop the 'the page content doesn't reload when I hit the back button' issue, I've been looking into the navigate function that backbone has available (this: router.navigate(fragment, [options]); ). There are lots of examples of how this is used, but none of them seem to have anything similar to the file setup that I'm using, so I'm not exactly sure how best to access this functionality from my view. If I include the router file in the view and instantiate a new version of it, the page breaks b/c it tries to run the initialize function again.

I'm just really at a loss on how this is supposed to work.

Can someone point me in the right direction?

Thanks! --Lisa

PS If someone has any better ideas, I am all ears!

Answer 1

You should have access to the Backbone object, which within it, has access to navigate around using the history.navigate function. If you call that passing in trigger: true you'll invoke the route. For instance:

Backbone.history.navigate("profile/manage", { trigger: true });