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

Question

我想实现一个AJAX导航系统,如GMail或类似的网络应用程序.例如,我有一个root 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();
});

希望这可以帮助.