Динамическая загрузка LI в JQueryMobile 1.0

Question

Я только что обновил свой проект с jquerymobile 1.0a1 до версии 1.0.

Я столкнулся с проблемой с динамическим контентом. На основе поиска ajax я заполняю неупорядоченный список элементами списка. Предыдущий следующий код обновил список, чтобы все стили отображались правильно:

$('#myContent').find("ul").listview();
$('#myContent').find("ul").listview('refresh');

Однако с версии 1.0 это больше не работает. Список появляется, но стилизация неверна, а тема данных для всех элементов игнорируется. Кто-нибудь сталкивался с подобной проблемой обновления и сталкивался с решением.

Answer 1

Обновление списков Если вы добавляете элементы в просмотр списка, вам нужно вызвать метод refresh(), чтобы обновить стили и создать любые вложенные списки, которые будут добавлены.Например:

$('#mylist').listview('refresh');

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

• http://jquerymobile.com/demos/1.0/docs/lists/docs-lists.html

, если #myContent является просмотром списка, который выможет сделать это:

$('#myContent').listview('refresh');

если страница #myContent является страницей, вы можете сделать что-то вроде этого:

$('#myContent').trigger('create');

Создать или обновить: важное различие Обратите внимание, что между созданием события и методом обновления есть важное различие, которое есть у некоторых виджетов.Событие create подходит для улучшения необработанной разметки, содержащей один или несколько виджетов.Метод обновления должен использоваться в существующих (уже улучшенных) виджетах, которыми манипулировали программно и которые должны обновляться для соответствия пользовательского интерфейса.

Например, если у вас была страница, на которой вы динамически добавляли новый неупорядоченный список с помощьюАтрибут data-role = listview после создания страницы, инициирующий создание родительского элемента этого списка, превратил бы его в виджет в стиле listview.Если после этого программным способом добавилось больше элементов списка, то при вызове метода обновления представления списка только эти новые элементы списка будут обновлены до расширенного состояния, и существующие элементы списка не будут затронуты.

• http://jquerymobile.com/demos/1.0/docs/pages/page-scripting.html

Answer 2

Посмотрите, связано ли это с вашим вопросом http://www.amitpatil.me/demos/jquery-mobile-twitter-app/, а также с этим http://www.amitpatil.me/demos/ipad-online-dictionary-app/

В первом примере я использую listview ('refresh');метод и во втором примере я использую $ (document) .page ("destroy"). page ();

Answer 3

Это может быть достигнуто через.

$('#myContent').listview('refresh');

The below snippet shows you to load data from xml and dynamically create a list view.
 function loadData()
 {
    $.ajax({
    url:"BirthdayInvitations.xml",
    dataType: "xml",
    success: function(xml) 
    {
       $(xml).find("event").each(function() 
       {
       $("#mymenu").append('<li><a href='+ "#" + ' id="a" ">' + this.textContent + '  </a> </li>'); 
       });

       $("#mymenu").listview('refresh');
    }
});
}

Answer 4

У меня была эта проблема. Причина, по которой вы все перепутали, заключается в том, что вы несколько раз инициализируете и обновляете элемент. Я заметил, что у меня запущены 2 разные функции, которые будут вызывать .listview ('refresh') для одного и того же элемента. После того, как я вынул одну, темы и данные вернулись в нормальное состояние. Также вы получаете какие-либо ошибки JS?

EDIT: Чтобы быть более конкретным, вы вызываете .listview() где-то в вашем коде 2 раза, что инициализирует его дважды. Я бы подождал, пока страница загрузится, чтобы запустить обновление, чтобы вы вызывали его только один раз.

Еще одна вещь, которую вы можете сделать, это проверить, инициализирован ли элемент уже или нет, чтобы вы не делали это дважды. Просто проверьте элемент или, в некоторых случаях, родительский элемент, чтобы увидеть, присутствует ли класс ui-listview.

var element = $('#myContent').find('ul');    

if ($(element).hasClass('ui-listview')) {
  //Element is already initialized
  $(element).listview('refresh');
} else {
  //Element has not been initiliazed
  $(element).listview().listview('refresh');
}

Просто к вашему сведению, вы можете связать эти события, чтобы они выглядели как $('#myContent').find('ul').listview().listview('refresh');

Answer 5

То, чего вы хотите, можно достичь, заменив две строки кода следующим:

 $('#myContent ul').listview('create');

Надеюсь, это поможет ...