【发布时间】：2013-12-06 07:54:23
【问题描述】：
我正在开发一个同时使用 RequireJS 和 BackboneJS 的 JQuery Mobile 应用程序 (1.4rc1)。该应用程序还没有那么复杂，但是太多了。我已经能够设置路由器并且它正在正确调用路由方法。我的页面，除了主页（位于index.html），保存在一个名为“/pages”的目录中。
应用程序加载正常并调用家庭路由器功能。稍后我将禁用该行为。
我点击登录链接，它会加载 /pages/login-page.html 并将页面添加到 DOM 并显示它。
问题：
当我点击后退按钮时，将调用 home 的路由器功能，然后调用 $.mobile.changePage("#mainpage") 但不会重新显示主页，也不会显示任何错误。
我已经确定 mainpage 仍在 DOM 中，并且正在调用正确的路由器函数。
为什么即使我调用了changePage，主页也不会重新显示？ 日志：
before start mobileRouter.js:5
before home: http://localhost:8080/host/index.html mobileRouter.js:14
after home: http://localhost:8080/host/index.html#mainpage mobileRouter.js:16
after start mobileRouter.js:7
before login: http://localhost:8080/host/index.html#mainpage mobileRouter.js:19
after login: http://localhost:8080/host/index.html mobileRouter.js:21
before home: http://localhost:8080/host/pages/login-page.html mobileRouter.js:14
after home: http://localhost:8080/host/index.html#mainpage mobileRouter.js:16
相关代码：
mobileRouter.js
define(["jquery", "backbone"],
function($, Backbone) {
var Router = Backbone.Router.extend({
initialize: function() {
console.log("before start");
Backbone.history.start();
console.log("after start");
},
routes: {
"": "mainPage",
"loginpage": "loginPage",
},
mainPage: function() {
console.log("before home: " + document.baseURI);
$.mobile.changePage("#mainpage");
console.log("after home: " + document.baseURI);
},
loginPage: function() {
console.log("before login: " + document.baseURI);
$.mobile.changePage("pages/login-page.html");
console.log("after login: " + document.baseURI);
}
});
return Router;
});
index.html
<!doctype html>
<html class="no-js ui-mobile-rendering" lang="en">
<head>
<title>The Measure Of It</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="lib/dev/jquery.mobile.structure-1.4.0-rc.1.css">
<link rel="stylesheet" href="lib/dev/jquery.mobile.theme-1.4.0-rc.1.css">
<script src="require.js" data-main="mobile"></script>
</head>
<body>
<div data-role="page" id="mainpage">
<div data-role="header">
<h1>Main Page</h1>
</div><!-- /header -->
<div data-role="content">
<p><a href="#loginpage">Login</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div>
</body>
</html>
/pages/login-page.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>page demo</title>
</head>
<body>
<div data-role="page" id="loginpage">
<div data-role="header">
<h1>Login</h1>
</div>
<div data-role="content">
<h2>email</h2>
<h2>password</h2>
</div>
<div data-role="footer">
<h1>Login Footer</h1>
</div>
</div>
</body>
</html>
mobile.js
require.config({
paths: {
"jquery": "lib/dev/jquery-1.10.2",
"jquerymobile": "lib/dev/jquery.mobile-1.4.0-rc.1",
"underscore": "lib/dev/lodash",
"backbone": "lib/dev/backbone",
"routers": "app/routers",
},
shim: {
"backbone": {
"deps": ["underscore", "jquery"],
"exports": "Backbone"
}
}
});
require(["jquery", "backbone", "routers/mobileRouter"], function($, Backbone, Mobile) {
$(document).on("mobileinit",
function() {
$.mobile.linkBindingEnabled = false;
$.mobile.hashListeningEnabled = false;
}
);
require(["jquerymobile"], function() {
this.router = new Mobile();
});
});
【问题讨论】：
-
$.mobile.changePage()在 jqm 1.4 中已弃用并替换为$.mobile.pageContainer.pagecontainer ("change", "#page_id");，试试看。 -
相同的行为，但很高兴知道。
-
在更改页面中尝试
index.html而不是#mainpage。 -
我希望不要陷入这个特殊问题，但是......它失败了，但它确实在 index.html 上执行了 GET。这有两个问题：它不需要执行 GET，因为主页面在 DOM 中，并且由于我不想处理的错误（但）它尝试从同一个页面加载 index.html目录，因为它从中加载登录页面，因此找不到它。
-
我不是骨干专家，但请帮我一个忙，当你点击返回按钮
console.log($.mobile.pageContainer.pagecontainer("getActivePage").prev("[data-role=page]").length);时添加这一行如果它返回0，那么登录页面就没有前一页了。也试试.next。 编辑：console.log($.mobile.urlHistory.stack);检查主页是否保留在历史记录中。
标签： jquery jquery-mobile backbone.js