如何在 JQuery Mobile Web 应用程序中使用 AJAX 哈希深度链接答案

【问题标题】：How to use AJAX hash deep linking in a JQuery Mobile web app如何在 JQuery Mobile Web 应用程序中使用 AJAX 哈希深度链接
【发布时间】：2012-03-19 11:17:05
【问题描述】：

我想实现一个 AJAX 导航系统，例如 GMail 或类似网络应用程序中的导航系统。例如，我有一个根store，所有导航都必须在 JavaScript 中通过深度链接处理。几个例子：

store/#/movies/star-wars
store/#/books/authors/tolkien

等等。我刚刚开始使用PathJS，它提供了一种简单的地址路由机制。

我遇到的问题是 JQuery Mobile 会自动从 URL 地址栏中剥离我的 # 哈希字符，将 store/#/movies/star-wars 变成 store/movies/star-wars。

我需要地址路由以保存应用程序状态、允许添加书签等。有什么我可以使用的解决方案吗？

【问题讨论】：

标签： jquery jquery-mobile routing url-routing

【解决方案1】：

正如您所注意到的，您需要设置$.mobile.pushStateEnabled = false，但是要能够替换 JQM 的内置导航支持还有很多。

我在http://jsfiddle.net/kiliman/4dkP8/ 和http://systemex.net/jqm/pathjs/ 创建了一个启用PathJS 支持的完整示例，这样您就可以看到URL 的样子。您甚至可以为哈希链接添加书签，它会导航到正确的页面。

首先你需要禁用 JQM 的默认哈希支持

$(document).bind('mobileinit', function() {

    // disable autoInit so we can navigate to bookmarked hash url    
    $.mobile.autoInitializePage = false;

    // let PathJS handle navigation
    $.mobile.ajaxEnabled = false;
    $.mobile.hashListeningEnabled = false;
    $.mobile.pushStateEnabled = false;

    $(document).bind('pagebeforechange', function(e, data) {
        var to = data.toPage;
        if (typeof to === 'string') {
            var u = $.mobile.path.parseUrl(to);
            to = u.hash || '#' + u.pathname;
            // manually set hash so PathJS will be triggered
            location.hash = to;
            // prevent JQM from handling navigation
            e.preventDefault();
        }
    });

});

接下来构建你的 PathJS 路由。对于此示例，我只是导航到现有页面，但您可以根据当前哈希动态生成页面。确保传入以下选项：dataUrl 和 changeHash。

    Path.map('#/store/movies/star-wars').to(function() {
        // setup options: update dataUrl and prevent JQM from changing hash        
        var options = {
            dataUrl: location.toString(),
            changeHash: false
        };
        // navigate to page object
        $.mobile.changePage($('#movies-star-wars'), options);
    });

    Path.map('#/store/books/authors/tolkien').to(function() {
        var options = {
            dataUrl: location.toString(),
            changeHash: false
        };
        $.mobile.changePage($('#books-authors-tolkien'), options);
    });

    Path.map('').to(function() {
        var options = {
            dataUrl: '',
            changeHash: false
        };
        $.mobile.changePage($('#home'), options);
    });

    Path.root('');

最后需要初始化页面，然后启动PathJS。

$(function() {
    // initialize page
    $.mobile.initializePage();
    // startup PathJS
    Path.listen();
});

希望这会有所帮助。

【讨论】：

谢谢，但它并不完全有效。我在initializePage() 上遇到错误，Chrome 说：Uncaught TypeError: Object #<Object> has no method 'initializePage'。我的网络应用程序没有初始化，我什么也看不到。
哪个版本的 Chrome？我的是 17.0.963.79。您可以启动开发人员工具并查看是否有任何其他错误吗？听起来 JQM 没有加载。
我还在 Firefox 10.0.3、Safari 5.1.2 和 IE 9 上对其进行了测试。虽然我必须将 path.js 文件复制到我的服务器，因为 github.com 没有返回正确的MIME 类型。
我需要指出我使用的是jQuery Mobile Splitview plugin，它使用的是经过修改（并且可能未更新）的 JQuery Mobile 版本。您的示例在 Chrome 中运行良好，这是我的网页有这种奇怪的行为。
通过评论 $.mobile.autoInitializePage = false; 和 $.mobile.ajaxEnabled = false; 我已经设法让它工作。但是我正在使用一些 Ajax 调用来获取 json 数据，甚至按照建议的 here 调用 $.mobile.showPageLoadingMsg() 也没有显示微调器。

【解决方案2】：

我用过 knockoutjs + sammy 。事实上，knockoutjs 有一个tutorial，告诉您如何实现您正在寻找的功能。

【讨论】：

我尝试使用 Sammy，路由就像在 PathJS 中一样工作，但是一旦 Sammy 处理了路由，JQuery Mobile 就会删除我在 URL 中的 # 并且我被重定向到它的默认操作 (我什至不知道它是哪一个）。

【解决方案3】：

使用https://stackoverflow.com/a/8159996/801065发布的解决方案解决了问题

$(document).on('mobileinit', function () {
    $.mobile.pushStateEnabled = false;
});

我需要禁用 JQuery Mobile 的 pushState 行为。看起来它现在可以工作了，尽管我还需要做很多改进。

【讨论】：

【解决方案4】：

虽然 jQuery mobile 目前不支持它，但他们指出一些资源可能有助于他们的常见问题解答，http://jquerymobile.com/test/docs/faq/pass-query-params-to-page.php

我目前正在使用：https://github.com/azicchetti/jquerymobile-router

【讨论】：