Обновление списка jQuery Mobile не использует внешний вид вставки - PullRequest
Новая
       23

Обновление списка jQuery Mobile не использует внешний вид вставки

1 голос
/ 08 февраля 2012

Я извлекаю данные JSON из локального хранилища и использую grep для фильтрации необходимых элементов на основе выбранного идентификатора.Затем я беру отфильтрованный набор и преобразовываю его в элементы «LI», затем добавляю их в контейнер UL.Контейнер UL имеет атрибут data-inset, установленный в yes.Когда я применяю listview ("refresh") к "UL", внешний вид вставки не применяется (закругленные углы на первом и последнем элементах.

Вот мой код: 

    var categoryId = 1;                 
    var data = JSON.parse(... data from localstorage...);

    //FILTER OUT DATA FOR THE SELECTED CATEGORY
    data = $.grep(data, function(el, i) 
    { 
        if (el.CategoryId == categoryId)
            return el;
    });

    //BUILD LI ELEMENTS FROM FILTERED LIST
    var categoryListItems = [];
    $.each(data, function(i, item) 
    {
        categoryListItems.push('<li data-category-id="' + item.CategoryId + '" data-id="' + item.ListId + '">' + item.ListName + '</li>');
    });

    $('ul#CategoryList li').remove();
    $('ul#CategoryList').append(categoryListItems.join('')).listview("refresh");

Глядя на полученный HTML, CSS-классы "ui-corner-top" и "ui-corner-bottom" не применяются после обновления. Это классы, которые закругляют углы первого и последнего элемента li для вставкивыглядеть и чувствовать.

Есть идеи, почему эти классы не применяются?

Ответы [ 2 ]

4 голосов
/ 21 марта 2012

Попробуйте использовать это 

$('ul#CategoryList').append(categoryListItems.join('')).listview("refresh", true);
0 голосов
/ 08 февраля 2012

Добавьте этот код после обновления списка

$("#pageid").trigger("create");//pageid is the id of the page which has the listview.

Это приведет к перестроению страницы с повторным применением всех мобильных стилей jquery.

...