href vs скриптовые переходы страниц и подсветка кнопок

Question

Я создаю несколько jQuery Mobile SPA вместе с knockout.js и, в целом, пользуюсь большим успехом. Я заметил, что это в основном косметическая проблема, и теперь я надеюсь ее решить.

Якорные теги, которые связывают через href производить приятную подсветку кнопки (синим цветом для темы по умолчанию) при переходе на страницу, но при навигации по нокауту click обязательный / $.mobile.changePage не производит такой основной момент. Я понимаю, что это, вероятно, не имеет ничего общего с нокаутом.

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

<div id="page1" data-role="page">
    <div data-role="content">   
        <h1>Page 1</h1>
        <a href="#page2" data-role="button">
                Page 2 via href (with highlight)</a>
    </div>
</div>

<div id="page2" data-role="page">
    <div data-role="content">   
        <h1>Page 2</h1>
        <a data-role="button"
            onclick="$.mobile.changePage('#page3');">
               Page 3 via script (no highlight)</a>
    </div>
</div>

<div id="page3" data-role="page">
    <div data-role="content">   
        <h1>Page 3</h1>
    </div>
</div>

Answer 1

На жаворонке я попытался предоставить оба href а также onclick атрибуты, и это, кажется, решить проблему. До тех пор, пока href указывает на правильную / результирующую страницу, вызов JavaScript все еще работает и кнопка подсвечивается. Я хотел бы некоторые комментарии по этому подходу.

<a data-role="button" href="#page4"
    onclick="$.mobile.changePage('#page4');">
    Page via script and href (with highlight)
</a>

По результатам тестирования выяснилось, что и href, и onclick ведут огонь.

Answer 2

Эта проблема еще не решена, по-видимому. Функция changePage по какой-то причине мешает стилизации кнопок. Это также было проблемой с навигационной панелью и страницей изменений, когда я создавал свое последнее приложение.

Вы можете решить это с небольшим исправлением jQuery, вы найдете все в моем примере:

$('#index').live('pagebeforeshow',function(e,data){  
    $('#custom-highlight').live('click', function(e) {
        $(this).addClass("ui-focus ui-btn-active");
        setTimeout(function(){$.mobile.changePage('#second');},50)
    });
});


$("[data-role=page]").live('pagebeforeshow', function (e,data) {
    data.prevPage.find('#custom-highlight').removeClass("ui-focus ui-btn-active");
});

Чтобы настроить пример в соответствии с вашими потребностями, используйте.each (для каждого элемента с пользовательским именем класса. Функция тайм-аута необходима, без нее changePage сработает до применения стилей. Вы можете немного поиграть с тайм-аутом. Иногда, если вы уменьшите его changePage сработает до применения стилей.

Вы хотите увидеть эту проблему на кнопках с href, потому что они уже имеют небольшую задержку.