Question

我正在服务器上使用Backbone和Marionette以及Ruby on Rails构建一个Web应用程序。

该应用程序运行良好，除了后台浏览器的后退按钮（FF，Chrome，IE11），它打破了一切。

这是一个重现问题的非常简单的例子：

＆＃13;

var TestApp = new Marionette.Application();

TestApp.addRegions({
	mainRegion: "#main-region"
});

TestApp.navigate = function(route, options){
	options || (options = {});
	Backbone.history.navigate(route, options);
};

TestApp.getCurrentRoute = function(){
	return Backbone.history.fragment
};

TestApp.on("start", function(){
	if(Backbone.history){
		Backbone.history.start();
		if(this.getCurrentRoute() === ""){
			this.navigate("foo");
			TestApp.MyApp.Show.Controller.ShowFoo();
		}
	}
});

TestApp.module("MyApp", function(App, TestApp, Backbone, Marionette, $, _) {
	App.Router = Marionette.AppRouter.extend({
		appRoutes: {
			"foo": "ShowFoo",
			"bar": "ShowBar",
			"baz": "ShowBaz"
		}
	});
	
	var API = {
		ShowFoo: function(){
			App.Show.Controller.ShowFoo();
		},
		ShowBar: function(){
			App.Show.Controller.ShowBar();
		},
		ShowBaz: function(){
			App.Show.Controller.ShowBaz();
		}
	};
	
	TestApp.addInitializer(function(){
		new App.Router({
			controller: API
		});
	});
});

TestApp.module("MyApp.Show", function(Show, App, Backbone, Marionette, $, _)
{
	Show.FooLayoutView = Backbone.Marionette.LayoutView.extend({
		template: "#templates-foo",
		tagName: "span"
	});
	Show.BarLayoutView = Backbone.Marionette.LayoutView.extend({
		template: "#templates-bar",
		tagName: "span"
	});
	Show.BazLayoutView = Backbone.Marionette.LayoutView.extend({
		template: "#templates-baz",
		tagName: "span"
	});

	var ContactsShowController = Marionette.Controller.extend({
		ShowFoo: function()
		{
			this.fooView = new Show.FooLayoutView();
			
			App.mainRegion.show(this.fooView);
		},
		ShowBar: function()
		{
			this.barView = new Show.BarLayoutView();
			
			App.mainRegion.show(this.barView);
		},
		ShowBaz: function()
		{
			this.bazView = new Show.BazLayoutView();
			
			App.mainRegion.show(this.bazView);
		}
	});
	Show.Controller = new ContactsShowController;
});

$(function() {
	TestApp.start();
});

＆＃13;

<h1>Test the browser's back button.</h1>

<div id="main-region"></div>

<script type="text/template" id="templates-foo">
	<p>
		F O O
	</p>

	<p>
		<a href="#bar">-&gt; Bar</a>
	</p>
</script>

<script type="text/template" id="templates-bar">
	<p>
		B A R
	</p>

	<p>
		<a href="#baz">-&gt; Baz</a>
	</p>
</script>

<script type="text/template" id="templates-baz">
	<p>
		B A Z
	</p>

	<p>
		Press the back button on your browser. You should go back to BAR, but the view is not shown.
	</p>
</script>

＆＃13;

＆＃13; 以上代码段可能无法直接使用，您需要包含Backbone和MarionetteJS。

我正在使用这些版本的图书馆：

underscore.js 1.7.0
backbone.js 1.1.2
backbone.marionette.js 2.2.2

因此，如果您加载应用程序，您应该看到＆＃34; F O O＆＃34;，单击Bar的链接，单击Baz的链接。您现在应该在显示＆＃34; B A Z＆＃34;的最后一页上。现在单击浏览器上的后退按钮。网址应该改回#bar，但你也应该看到＆＃34; B A R＆＃34;，但#main-region是空的。

我该如何解决这个问题？

我打开更新库。而且坦率地说，我也处于将垃圾箱和牵线木偶投入垃圾箱并用旧的javascript + jQuery重新编码所有内容的边缘......但我不想这样做。

感谢您的帮助。

纪尧姆

Answer 1

更新：根据评论，很明显罪魁祸首是OP的导轨安装附带的附件。

我建议他删除项目中的rails/turbolinks库，因为它似乎干扰了正确的页面重新加载。

使用您的代码，并包含您发布的相同库。我没有改变一件事，它就像魔法一样。

我还使用了jQuery 2.1.0您的版本是什么？请参阅fiddle。

浏览器的后退按钮打破了我的Backbone / Marionette应用程序

1 个答案: