Listview('refresh') 上最初隐藏的项目“中断”答案

【问题标题】：Initially hidden items "breaks" on Listview('refresh')Listview('refresh') 上最初隐藏的项目“中断”
【发布时间】：2015-02-03 17:09:31
【问题描述】：

我可以看到这个问题是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 类。

Filterable Widget 上有一些关于此的内容（请参阅Providing pre-rendered markup 部分），但我不知道。

任何帮助表示赞赏。

【问题讨论】：

当您添加列表项时，它们最初是否因为不符合当前输入的过滤条件而被隐藏？还是您正在尝试进行显示/自动完成之类的事情？
是的。我知道用户在哪个城市，所以我在页面加载时隐藏了其他列表项。我现在已经破解了这个并添加了我自己的隐藏元素并且它可以工作。我想我实际上必须这样做，因为如果我只使用ui-screen-hidden，一旦我开始使用自动完成功能，自动填充功能就会删除这个类。
顺便说一句，我刚刚找到了这个：jquerymobile.com/upgrade-guide/1.4，上面写着Widgets that don't have option enhanced (yet) are: Listview, Selectmenu, Panel, Toolbar, Navbar, and Slider.，我不知道这个文件有多老，是否已经实施。
你能不能把城市写进过滤框然后调用.filterable("refresh");以便可过滤小部件隐藏列表项？
在@ezanker下方查看我的答案

标签： jquery listview jquery-mobile

【解决方案1】：

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

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

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

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

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

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

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

事实证明，Listview has not yet gotten 似乎是 enhanced 功能。

（还）没有选项增强的小部件是：Listview、选择菜单、面板、工具栏、导航栏和滑块。

@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');
});

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

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

【讨论】：