Question

我从thelocalstorage中提取JSON数据，并使用grep根据所选ID过滤掉所需的项目。然后，我将过滤后的集合转换为ti“LI”项目，然后将它们附加到UL容器中。 UL容器的data-inset属性设置为yes。当我将listview（“刷新”）应用于“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元素的角点的类。

关于为什么没有应用这些类的任何想法？

Answer 1

尝试使用此

$('ul#CategoryList').append(categoryListItems.join('')).listview("refresh", true);

Answer 2

在listview刷新后添加此代码

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

这将强制重新构建页面，并重新应用所有jquery移动样式。

jQuery Mobile listview刷新不应用嵌入式外观

2 个答案: