Как я могу правильно клонировать список 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 виджет не имеет идентификатора, или вы хотите изменить идентификатор клона перед добавлением его в DOM, так что ваши идентификаторы уникальны.