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

Question

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

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

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

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

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

Answer 1

正如您所注意到的，您需要设置$.mobile.pushStateEnabled = false，但要取代JQM的内置导航支持，还有很多工作要做。

我在这里创建了一个启用PathJS支持的完整示例http://jsfiddle.net/kiliman/4dkP8/还有现场版本http://systemex.net/jqm/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();
});

希望这能有所帮助。

Answer 2

我使用了knockoutjs+sammy。事实上，knockoutjs有一个关于如何实现您想要的功能的教程。

Answer 3

使用发布在https://stackoverflow.com/a/8159996/801065

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

我需要禁用JQuery Mobile的pushState行为。尽管我还需要做很多改进，但现在看起来它正在发挥作用。

Answer 4

虽然jQuery mobile目前不支持它，但他们在FAQ中指出了一些可能有帮助的资源，http://jquerymobile.com/test/docs/faq/pass-query-params-to-page.php

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