最初在Listview('refresh')上隐藏的项“断开”

Question

我可以看到这个问题是一个1.3版中的错误，但已经解决了。但我现在对jqm1.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类。

在可过滤Widget上有一些关于这一点的内容(请参阅Providing pre-rendered markup部分)，但我不太明智。

任何帮助都很感激。

Answer 1

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

​

​

为此，我希望通过在enhanced中使用可过滤Widget选项来筛选列表。

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

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

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

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

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

事实证明，Listview还没有抓到似乎是enhanced特性的一部分。

没有增强选项的小部件有: Listview、Selectmenu、Panel、Toolbar、Navbar和Slider。

@ezanker建议我可以在输入过滤器中放置位置。这将不起作用，因为有两个原因：

1. 视图页上的筛选器是按存储名(而不是位置)进行筛选。
2. 即使它是按位置过滤，一旦我删除了城市名称，它也会显示出所有的商店。

因此，我所做的就是将我自己的hidden类添加到列表项中。

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

若要更改位置，请转到新页，选择“位置”并返回到“查看”页。为了应用我的新位置，我在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');
});

现在，我的列表根据位置进行筛选，并且可以通过存储名进一步过滤列表。

也许还有其他方法可以实现这一点，但这对我来说是有效的:)