列表视图 ('refresh') 上最初隐藏的项目 "breaks"

Question

我可以看出这个问题是 bug in v1.3，但已经解决了。但是我现在在使用 JQM 1.4 时遇到了这个问题。

在我的 HTML 中，我有以下代码：

<ul class="storeList"
    data-role="listview"
    data-inset="true"
    data-filter="true"
    data-enhanced="true"
    data-input="#store-filter"></ul>

data-enhanced="true" 指示可过滤小部件在实例化期间跳过这些 DOM 操作

然后在 jQuery 中，我使用 Ajax 获取数据（在页面加载时）并动态添加列表项：

// loop
// If user is in city A, hideItem = True
if(hideItem) {
    $(li).attr('class', 'ui-screen-hidden');
}
storeList.append(li);
// loop-end

// listview needs to be initialized before it can be enhanced/refreshed.  
// That's why we do a .listview() first then .listview('refresh')
$('.storeList').listview().listview('refresh');

问题是 .listview('refresh') 删除了 ui-screen-hidden class。

Filterable Widget 上有一些关于此的内容（参见 Providing pre-rendered markup 部分），但我不太聪明。

感谢任何帮助。

Answer 1

我的目标是显示一个动态创建的商店列表，但只显示用户当前所在城市的商店。

为此，我想使用 Filterable Widget 中的 enhanced 选项来过滤列表。

<ul data-enhanced="true"></ul>

data-enhanced="true" 指示可过滤小部件在实例化期间跳过 DOM 操作，从而加快启动/加载过程。

然后我将 ui-screen-hidden 添加到所有不是奥斯陆的列表项。由于列表是动态创建的，因此我必须刷新列表视图。

$('.storeList').listview().listview('refresh');

问题是 Listview 刷新删除了 ui-screen-hidden class 并且显示了我的整个列表。

事实证明，Listview has not yet gotte在 enhanced 功能中。

Widgets that don't have option enhanced (yet) are: Listview, Selectmenu, Panel, Toolbar, Navbar, and Slider.

@ezanker 建议我可以将我的位置放在我的输入过滤器中。由于两个原因，这将不起作用：
1. 查看页面的筛选是按店名筛选，不是位置筛选。
2. 即使是按位置筛选，我去掉城市名也会显示所有店铺。

所以我所做的就是将我自己的 hidden class 添加到列表项中。

if(location !== (store.city+store.countryID)) {
    $(li).attr('class', 'hidden');
}

要更改位置，我转到新页面，select 位置和 return 到我的视图页面。为了应用我的新位置，我在 pagebeforeshow 事件中做了一些编码。

$('#storeListPage').on('pagebeforeshow',function(e,data){
    //First we remove all hidden items
    $('.storeList li').removeClass('hidden ui-screen-hidden');

    // Then we only shows the items for selected city
    var location = $('a.selectLocation .city').text() + $('a.selectLocation .countryID').text();
    var selector = '.storeList li:not([data-location="'+location+'"])';
    $(selector).addClass('hidden');
});

现在我的列表按位置过滤，我可以进一步按商店名称过滤列表。

可能还有其他方法可以实现这一点，但这对我有用:)

列表视图 ('refresh') 上最初隐藏的项目 "breaks"

Initially hidden items "breaks" on Listview('refresh')

jquery

listview

jquery-mobile