在我们的应用中,我们实际上有两个Backbone SPA应用。第一个是用于登录、注册和其他未认证用户的功能。它的URL类似于http://www.example.com/registration#signin。一旦您登录,您将被重定向到我们的主Backbone应用程序http://www.example.com/ui#home。
在我的主UI应用程序中,我使用Backbone。history without pushState。应用程序文件看起来像这样:
define(function (require) {
var App = new Marionette.Application();
App.addInitializer(function (options) {
...
});
...
App.on('initialize:after', function () {
$(function(){
if (Backbone.history) {
Backbone.history.start({ root: '/ui' });
}
});
$.log("**WebApp**: Marionette app started.");
});
return App;
});
当然,除了ie9(也许是ie10,我需要检查一下),任何浏览器都可以完美地工作。在ie9中,所有的路由都可以正常工作。点击链接(如http://www.example.com/ui#anotherpage)就可以了。但是,当用户在浏览器中单击Back按钮时,它们不会被发送回上次触发的路由。相反,它们被发送到http://www.example.com/registration#signin,这是我们的web服务器Node提供的最后一个页面。当我点击链接时,我可以看到那段历史。length和Backbone.history.history.length没有更新。
所有的路由都是从链接/URL触发的。我没有在代码中使用router.navigate()。下面是我们的Router的一些例子:
define(function (require) {
var Backbone = require('backbone'),
Marionette = require('marionette');
return Backbone.Marionette.AppRouter.extend({
appRoutes: {
"": "showHome",
"home": "showHome",
"foo": "showFoo"
}
});
});
和控制器:
define(function (require) {
var Backbone = require('backbone'),
Marionette = require('marionette');
return Backbone.Marionette.Controller.extend({
showHome: function () {
require(['webapp','modules/home'], function (WebApp) {
WebApp.module("Home").start();
WebApp.module("Home").controller.showModule();
});
},
showFoo: function () {
require(['webapp', 'modules/foo'], function (WebApp) {
WebApp.module("Foo").start();
WebApp.module("Foo").controller.showModule();
});
}
});
});
更新:
在进一步的研究中,问题是旧版本的IE不记录其历史中的哈希变化。参见-更改位置。然后按后退按钮- IE的行为不同于其他浏览器。但我仍然不确定解决这个问题的方法是什么。我猜它会以某种方式涉及手动处理哈希变化事件与插件,如jQuery Hashchange和做…什么东西吗?手动设置IE的历史记录?或者制作一个自定义历史对象,并在IE中检测到后退按钮时使用它?
我在我们的一个IE应用程序中遇到了同样的问题。像下面这样启动主干历史可以。
Backbone.history.start({
pushState: true,
hashChange: false
});
更新:正如T Nguyen所提到的,当你将pushState设置为true时,hash URL不再触发路由。除非你为所有主干路由添加服务器端支持,否则你需要在客户端添加一个事件处理程序来捕获适当的链接,并在路由