0

我正在使用backbone.js 路线，我正在努力创造历史。这是我的代码：

$(function() {  

    var AppRouter = Backbone.Router.extend({
        routes: {
           "/": "initHome",
           "home": "initHome",
           "projects": "initProjects",
           "project/:id" : "initProject"
        }
    });

    // Instantiate the router
    var app_router = new AppRouter;

    app_router.on('route:initProject', function (id) {
        // Note the variable in the route definition being passed in here
          getContent("project",id);
    });

    app_router.on('route:initProjects', function () {
          getContent("projects");
    });

    app_router.on('route:initHome', function () {
          getContent("home");
    });


    // SINGLE PAGE MAGIC
    $(document).on("click",".links",function(e) {
        var href = $(this).attr("href");
        var url =  lang + "/" + href;    
            page = $(this).attr("data-id");
        var param = $(this).attr("data-param");         
        if (typeof(param) == 'undefined') { param = ""; }  

        if(activepage != href && !main.hasClass("loadingPage")){    
            loader.show();  
            firstInit = false;
            activepage = href;
            res = app_router.navigate(url, true);
            getContent(page,param);
        }   
        return false;                           
    });

    Backbone.history.start({pushState: true, root: "/karlin/"});

});

推送状态在单击时工作正常，但当我尝试浏览器中的后退/下一步按钮时，它不会调用 getContent() 函数。我是骨干新手，所以任何建议都会有所帮助。

4

2 回答 2

0

我支持安德鲁的回答：您对路由的使用有点奇怪。

如果您有兴趣了解更多原因，如 Andrew 所说，“Router.navigate 适用于罕见情况”，请在此处阅读第 32-46 页：http://samples.leanpub.com/marionette-gentle-introduction-sample 。 pdf

这是我关于 Backbone.Marionette.js 的书的示例的一部分，但路由概念保持不变。特别是，您将了解为什么默认trigger值为false，以及为什么在设计应用程序路由时考虑到这一点会使您的应用程序变得更好。

于 2013-05-20T18:05:35.243 回答
0

改变这个：res = app_router.navigate(url, true);

对此：app_router.navigate(url, {trigger: true});

我看不出有任何理由创建一个变量“res”。

恕我直言，您有一个复杂的 Backbone 实现。我建议将您的路线移动到构造函数，如下所示：

var AppRouter = Backbone.Router.extend({
    routes: {
       "/": "initHome",
       "home": "initHome",
       "projects": "initProjects",
       "project/:id" : "initProject"
    },

    initProject: function (id) {
    // Note the variable in the route definition being passed in here
      getContent("project", id);
    },

    initProjects: function () {
      getContent("projects");
    },

    initHome: function () {
      getContent("home");
    }
});

// Instantiate the router
var app_router = new AppRouter;

此外，如果您像在 Backbone 文档中那样正确设置路由，

routes: {
  "help":                 "help",    // #help
  "search/:query":        "search",  // #search/kiwis
  "search/:query/p:page": "search"   // #search/kiwis/p7
},

您可以使用传统链接将参数传递给路由。您还可以将 if activePage 语句作为更改页面的辅助函数移动到路由器。

Router.navigate 适用于极少数情况。

我建议，一遍又一遍地阅读 Backbone 文档。我每次都学到新东西。那里有很多东西，Backbone 已经在高效地做事了。无需重新发明轮子。

希望这可以帮助！

于 2013-02-01T00:09:42.890 回答