Backbone.js的不改变URL路由 [英] Backbone.js routing without changing url

问题描述

我移植的基础上Backbone.js的和jQuery一个Chrome扩展单页面的Web应用程序。然而，无论是 pushState的，也不是基于hashbang路由器模式似乎与扩展中的环境中发挥出色。我来，我是用户交互更好只是直接渲染视图的结论，完全绕过了 window.location的系统。不过，我也不太清楚如何实现这一点没有在几十个文件的变化呼叫 Router.navigate 。

I am migrating a single-page web application based on Backbone.js and jQuery to a Chrome extension. However, neither the pushState nor the hashbang-based router modes seem to play well with the environment within the extension. I've come to the conclusion that I'm better off just directly rendering views on user interactions, bypassing the window.location system altogether. However, I'm not too sure how to implement this without changing calls to Router.navigate in dozens of files.

也可把骨干路由系统，但旁路到URL的任何更改可插拔/模块化的方式？

Is there a pluggable/modular way to keep the Backbone routing system but bypass any changes to the url?

推荐答案

我你真的要坚持使用 Router.navigate 从路由系统骨干受益。 JS提供，而无需在Chrome扩展使用（例如路线，包括被覆盖斜线），当处理hashbang错误，你可以让 Router.navigate 直接加载URL，跳绳整个pushState的体操。

I you really want to stick with using Router.navigate to benefit from the routing system that Backbone.js provides without having to deal with hashbang bugs when used in a Chrome extension (e.g. routes including a slash being overwritten), you could make Router.navigate load the url directly, skipping the whole pushState gymnastic.

这实际上是pretty容易实现：

This is actually pretty easy to accomplish:

Router = Backbone.Router.extend({

  navigate: function (url) {

    // Override pushstate and load url directly
    Backbone.history.loadUrl(url);

  },

  // Put routes here
  routes: { }

});

您可以调用 Router.navigate（URL）来加载一个新的途径，而不改变历史，甚至绑定包含数据骨干属性（如＆LT; A HREF =登陆数据骨干＆GT;登录＆LT; / A＆GT; ），像这样的活动

You can then call Router.navigate(url) to load a new route without changing history, or even bind the action to every link containing a data-backbone attribute (e.g. <a href="login" data-backbone>Login</a>) with an event like this:

$(function(){

  // Initialize router
  Router = new Router;
  Backbone.history.start();

  // Bind a[data-backbone] to router
  $(document).on('click', 'a[data-backbone]', function(e){
    e.preventDefault();

    Router.navigate( $(this).attr('href') );
  });

});

这篇关于Backbone.js的不改变URL路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！