jQuery Mobile устанавливает атрибут ListView
'Ello Stackruers.
Так что это мой сценарий: я заполняю ListView
с помощью localStorage
, Все работает, заполняя этот список и "обновляя" его. НО!
Теперь я хочу добавить панель поиска, если более 5 элементов добавлены к ListView
, Это мой текущий код (который не работает):
if (resultLength > 5)
{
// alert('5 or more elemnts found.');
$("#ConnectionList").attr("data-filter", true);
$("#ConnectionList").attr("data-filter-placeholder", "Search...");
}
Когда я раскомментирую alert
работает правильно. Добавление .listview('refresh')
позади двух строк, похоже, тоже не работает.
Что я делаю неправильно?
Заранее спасибо.
1 ответ
К сожалению, это не сработает. jQuery Mobile
не удастся динамически добавить фильтр в существующий список.
Но есть обходной путь. Прежде чем заполнять ваш список, подсчитайте количество элементов, которые вы пытаетесь заполнить, если число равно 5 или более, удалите текущий список и добавьте новый в том же месте. Это еще одна странная вещь: если вы создаете просмотр списка с нуля (с учетом фильтра), фильтр будет успешно сгенерирован.
Я сделал для вас пример: http://jsfiddle.net/Gajotres/SS7vJ/
$(document).on('pagebeforeshow', '#index', function(){
$('<ul>').attr({'id':'test-listview','data-role':'listview', 'data-filter':'true','data-filter-placeholder':'Search...'}).appendTo('#index [data-role="content"]');
$('<li>').append('<a href="#">Audi</a>').appendTo('#test-listview');
$('<li>').append('<a href="#">Mercedes</a>').appendTo('#test-listview');
$('<li>').append('<a href="#">Opel</a>').appendTo('#test-listview');
$('#test-listview').listview().listview('refresh');
});
Также не забудьте вызвать.listview(дважды, первый без параметра refresh и второй раз с параметром refresh. Без него вы получите эту ошибку:
cannot call methods on listview prior to initialization
Вы можете найти больше об этой проблеме в этой СТАТЬЕ, чтобы быть прозрачным, это мой личный блог. Или найди это ЗДЕСЬ. Ищите главу под названием: Проблемы улучшения разметки.