Одностраничный веб-сайт (JQuery Mobile): как управлять несколькими экземплярами одной страницы в DOM?

Question

Я создаю социальный сайт на основе jquery mobile. Страницы загружаются динамически с использованием AJAX и кэшируются в DOM (jQM управляет этим). У меня есть система чата на сайте: когда пользователь нажимает на имя на странице списка контактов (/ chat /), страница с историей разговоров с выбранными контактами загружается (/ char / msg /? U = user_name).

Проблема: когда пользователь общается с несколькими (n) пользователями на одной странице, n экземпляров страницы беседы будут загружены и сохранены в DOM (/ chat / msg /? U = user_1, / chat / msg /? u = user_2, ..., / chat / msg /? u = user_n). Идентификаторы элементов на странице разговора неизбежно конфликтуют, что нарушает функциональность чата.

Как мне управлять страницами беседы, чтобы избежать конфликтов ID? Уничтожение всех других страниц беседы при переключении на одну из них не вариант - я бы хотел поддерживать быстрое переключение между беседами. Я заметил, что GMail и Facebook назначают случайные уникальные идентификаторы в таких случаях, но это лучшие практики для этого? Есть ли образец, который я могу использовать? И есть ли более простое решение?

Спасибо.

Answer 1

Это распространенная проблема при привыкании к jQuery Mobile.Решение состоит в том, что если вы используете один и тот же идентификатор на нескольких псевдостраницах, остановитесь и сделайте их классами.Это так же просто, как изменить атрибут id на class для любого элемента, который использует идентификатор не уникальным способом.

Вот пример:

<div data-role="page" id="some-page">
    <div data-role="content">
        <ul class="page-list">
            <li class="first-list-item"></li>
        </ul>
        <a class="back-btn" data-role="button" href="#">Back</a>
    </div>
</div>

Вы можетезатем используйте $.mobile.activePage.find('.back-btn'), чтобы найти кнопку возврата для текущей страницы, или вы можете использовать $('#some-page').find('.back-btn'), чтобы указать конкретную кнопку возврата.

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

Answer 2

Существует ссылка на текущую страницу через $ .mobile.activePage, все селекторы должны искать с текущей страницы в качестве корня, например, $ .mobile.activePage.find ('# myElement')

Вам также необходимо убедиться, что вы правильно используете pageinit / pageshow, чтобы правильно связать своих on слушателей - в этом случае у вас также есть ссылка на текущую страницу.

edit Thought IЯ бы добавил это на случай, если это поможет: https://stackoverflow.com/a/9085014/737023 Вот как мне удалось обработать несколько страниц и конфликты идентификаторов. Я предполагаю, что вы также используете DOM caching = true?Я никогда не работал с этим, но не должно быть никаких новых проблем.