javascript - Backbone.js - 履歴が 2 つのエントリを作成しています

Question

問題を特定できないため、これをコードで表現する方法がわかりませんが、ユーザーがアプリのリスト項目をクリックすると、Backbone.history が 2 つの項目を記録しているように見えるという問題があります。

これは一貫していません。

私のアプリには、下部に 4 つのメイン セクションにリンクする 4 つの項目のナビゲーションがあります (最初のセクションはホームで、「/」にルーティングされます)。アプリをロードしたら、他のナビゲーション ページの 1 つに移動し、[ホーム] ボタンをもう一度クリックしてから、ナビゲーション オプションの 1 つをクリックすると、選択するアイテムのリストが表示されます。次に 1 つを選択すると、2 つのエントリが追加されます。まず、何らかの理由で、最後に /# が付いたホーム ルートへの参照と、クリックした項目のルートへの参照が追加されます。

その結果、「戻る」と不可解にホームページに移動します。

それが役立つ場合、私のルーターは次のようになります...

    var siansplanRouter = Backbone.Router.extend({

        initialize: function () {
            var that = this;
            this.routesHit = 0;
            //keep count of number of routes handled by your application
            Backbone.history.on('route', function() { that.routesHit++; }, this);

            window.SiansPlanApp.render();
            window.SiansPlanApp.router = this;
        },

        routes: {
            '': 'showHome',
            'home': 'showHome',
            'hub': 'showHome',
            'samples': 'showJqmSamples',
            'mealplanner': 'showCurrentMealPlanner',
            'mealplanner/:planId': 'showMealPlanner',
            'recipes': 'showRecipeSearch',
            'recipes/:recipeId': 'showRecipe',
            'settings': 'showSettings',
            'versioninfo': 'showVersionInfo',
            '*other': 'showHome'
        },

        routesHit: 0,

        back: function() {
            if(this.routesHit > 1) {
                window.history.back();
            } else {
                //otherwise go to the home page. Use replaceState if available so
                //the navigation doesn't create an extra history entry
                this.navigate('/', { trigger: true, replace: true });
            }
        },

        showHome: function () {
            SiansPlanApp.renderHome();
        },

        showJqmSamples: function () {
            SiansPlanApp.renderView(new SiansPlanApp.views.Hub.Samples());
        },

        showMealPlanner: function (planId) {
            SiansPlanApp.renderView(new SiansPlanApp.views.Planner.MealPlanner({ id: planId }));
        },

        showCurrentMealPlanner: function () {
            SiansPlanApp.renderView(new SiansPlanApp.views.Planner.MealPlanner({ current: true }));
        },

        showRecipeSearch: function () {
            SiansPlanApp.renderView(new SiansPlanApp.views.Recipes.Search());
        },

        showRecipe: function (recipeId) {
            SiansPlanApp.renderView(new SiansPlanApp.views.Recipes.Recipe({ id: recipeId }));
        },

        showSettings: function () {
            SiansPlanApp.renderView(new SiansPlanApp.views.System.Settings());
        },

        showVersionInfo: function () {
            SiansPlanApp.renderView(new SiansPlanApp.views.About.VersionInfo.ListView());
        }
    });

ここにもキックオフファイルにいくつかの基本的な要素があります...

define(['router', 'regions/r-app', 'jquery', 'domReady'],
   function (SiansPlanRouter, AppRegion) {

       var run = function () {

           // Global click event handler to pass through links to navigate
           $(document).on("click", "a:not([data-bypass])", function (e) {
               var href = { prop: $(this).prop("href"), attr: $(this).attr("href") };
               var root = location.protocol + "//" + location.host + SiansPlanApp.root;

               if (href.prop && href.prop.slice(0, root.length) === root) {
                   e.preventDefault();
                   Backbone.history.navigate(href.attr, true);
               }
           });

           $.ajaxPrefilter(function (options, originalOptions, jqXhr) {
               //options.url = '/api' + options.url;
           });

           // Create the global namespace region object.
           window.SiansPlanApp = new AppRegion();

           // Adds the authorization header to all of the API requests.
           $(document).ajaxSend(function (e, xhr, options) {
               xhr.setRequestHeader("Authorization", 'SiansPlan ' + SiansPlanApp.cookies.getSessionData());
           });

           // Load up session data if any is present yet - this can't happen until the XHR headers are set up.
           SiansPlanApp.session.loadSession();

           // Instantiate the router.
           window.SiansPlanApp.router = new SiansPlanRouter();

           // Boot up the app:
           Backbone.history.start();
       };

       return {
           run: run
       };
   });