Как использовать AJAX-хеширование в веб-приложении JQuery Mobile - PullRequest
1 голос
/ 19 марта 2012

Я хотел бы внедрить систему навигации 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.

Мне нужна маршрутизация адресов, чтобы сохранить состояние приложения, разрешить закладки и т. д. Есть ли какое-либо решение, которое я могу использовать?

Ответы [ 4 ]

5 голосов
/ 19 марта 2012

Как вы заметили, вам нужно установить $.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();
});

Надеюсь, что этопомогает.

1 голос
/ 19 марта 2012

Я использовал knockoutjs + Сэмми . На самом деле у knockoutjs есть учебник о том, как реализовать нужную вам функциональность.

0 голосов
/ 18 февраля 2013

Хотя это в настоящее время не поддерживается в jQuery mobile, они указывают на некоторые ресурсы, которые могут помочь в их часто задаваемых вопросах, http://jquerymobile.com/test/docs/faq/pass-query-params-to-page.php

Я сейчас использую: https://github.com/azicchetti/jquerymobile-router

0 голосов
/ 19 марта 2012

Проблема была решена с помощью решения, опубликованного на https://stackoverflow.com/a/8159996/801065

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

Мне нужно было отключить поведение pushState в JQuery Mobile.Похоже, он работает сейчас, хотя мне все еще нужно сделать много улучшений.

...