Backbone.js - 历史记录正在创建两个条目

时间:2013-09-10 13:09:25

标签: javascript backbone.js

我不确定如何在代码中表达这一点,因为我似乎无法找到问题,但我的问题是,当用户点击我的列表项时,Backbone.history似乎记录了两个项目应用

这不一致。

我的应用在底部有一个4项导航,链接到4个主要部分(第一个是主页 - 路由到'/')。如果我加载应用程序,请转到其中一个导航页面,然后再次单击“主页”按钮,然后单击其中一个导航选项,我会得到一个可供选择的项目列表。如果我然后选择一个,则添加两个条目 - 首先,由于某种原因,在末尾用/#引用归属路由,然后是我单击的项目的路由。

最终的结果是'后退'然后莫名其妙地把我带到了主页。

如果有帮助,我的路由器看起来像这样......

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

0 个答案:

没有答案