PhoneGap jQueryMobile listview не отображается правильно на дополнительных страницах

Я разрабатываю приложение PhoneGap с помощью jQueryMobile. Моя проблема в том, что listview отображается неправильно на странице альбомов, но находится на главной странице. Я использую те же data-theme для обоих.

Question: Why is the listview on the second page not displaying correctly (background, font, icon)?

Research:

  1. документация jQueryMobile в списках эскизов (что я пытаюсь для выполнения)
  2. документация jQueryMobile в listview апи
  3. Google искал и нашел учебник о том, как это сделать (без изменений)

Код для страницы альбома

    <div data-role="page" id="albums" data-url="albums" data-theme="a">
        <div data-role="header">
            Back
            

Albums

<button id="albums-refresh">Refresh</button> </div> <div data-role="content">
    </div> </div>

    Функция jQuery для динамического заполнения списка listview

    Load: function() {
        $("#albums-content").empty();
        $.ajax({type: "GET", url: "https://itunes.apple.com/lookup?id=356541460&entity=album", data: {get_param: "results"}, dataType: "json", success: function (data) {$.each(data, function (index, element) {$.each(this, function (index, element) {if (element.wrapperType === "collection") {$("#albums-content").append("
  • " + element.collectionName + ""); $("#a-" + index).bind('click', function (index) {Albums.AlbumID = index; }); }}); }); }}); }
  • Отладка PhoneGap:

    enter image description here

    Album page Note that the purple background and orange text is not there, though you can see a faint hint of the listview drop shadow below the second album.

    enter image description here

    1
    nl ja de

    3 ответы

    Для решения этой проблемы легко найти решение (в следующий раз смотрите в документацию jQM).

    Когда объект динамически создается в списке jQuery Mobile , его разметка также должна быть улучшена следующим образом:

    $('#some-listview').listview('refresh');
    

    В основном каждый раз, когда динамический контент добавляется на страницу jQuery Mobile, его необходимо вручную увеличить. Если вы хотите узнать больше об этой теме, пожалуйста, взгляните на мой блог СТАТЬЯ . Или вы можете найти его ЗДЕСЬ .

    2
    добавлено
    Вы все отправили то же самое! Спасибо, я совсем забыл про вызов обновления.
    добавлено автор SnareChops, источник

    Одна вещь, которую вы должны убедиться: после добавления всего содержимого в список просмотра вам нужно будет добавить следующий код

    $("ul#albums-content").listview("refresh");
    

    Это обновление стилей и создание любых вложенных списков, которые будут добавлены.

    2
    добавлено
    Вы все отправили то же самое! Спасибо, я совсем забыл про вызов обновления.
    добавлено автор SnareChops, источник

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

    http://jquerymobile.com/demos/1.2.0/docs /lists/lists-methods.html

    2
    добавлено
    Вы все отправили то же самое! Спасибо, я совсем забыл про вызов обновления.
    добавлено автор SnareChops, источник
    Верстка сайтов HTML/CSS/JS/PHP
    Верстка сайтов HTML/CSS/JS/PHP
    3 439 участник(ов)

    Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda