Как правильно клонировать просмотр списка JQM?

Question

У меня есть страница с JQM-списком в качестве основного контента.Затем перемещается другая страница, на которой необходимо использовать тот же самый список в качестве боковой панели.Моей первой мыслью было использовать clone () для правильного клонирования списка на другую страницу.

Это работает очень хорошо, если первая страница ( пример удален ) уже была загружена.Однако если пользователь переходит непосредственно ко второй странице (пример удален ), когда он клонирует список, он не был инициализирован JQM как просмотр списка, поэтому он не отображается правильно.Я не могу понять, как заставить это правильно инициализировать / клонировать.

Сайт, о котором идет речь, пример удален .

Если моя проблема не ясна, дайте мне знать, и я постараюсь немного разобраться.

Answer 1

Уловка с инициализацией обновления была трудной задачей, но в основном я должен был try обновить список, который я клонировал, и, если это не удалось (исключение выдается), затем инициализировать список клонов. Если обновление удалось, значит, оно уже инициализировано, и мне не нужно инициализировать клон.

try {
    // try to refresh the parent, if it works, we don't need to do anything
    $('#To-Clone').listview('refresh');
} catch (e) {
    // if refreshing the parent fails, then it wasn't initialized, and we need to initialize the child
    $('#Clone').listview();
}

Answer 2

Вы можете объявить функцию, которая создает меню, включить ее на каждой странице вашего сайта (если у вас еще нет глобального включаемого файла JS), а затем вызывать ее для создания меню при необходимости:

function build_menu($container) {
    var out = '<ul data-role="listview">...</ul>';

    $container.append(out).trigger('create');
}
$(document).delegate('#my-page-id', 'pageinit', function () {
    build_menu($(this).children('.ui-page'));
});

В противном случае вы можете проверить, есть ли у виджета класс .ui-listview, который применяется во время инициализации.

//cache the clone
var $clone = $('#my-element').clone();

//check if the clone has the initialized class
if ($clone.hasClass('ui-listview')) {

    //since this listview has already been initialized, refresh it
    $('#my-container').append($clone).children().last().listview('refresh');
} else {

    //initialize this listview clone
    $('#my-container').append($clone).children().last().listview();
}

Вы хотите убедиться, что ваш виджет listview не имеетID или вы захотите изменить идентификатор клона перед добавлением его в DOM, чтобы ваши идентификаторы были уникальными.