WinJs列表视图显示:没有ID的瓦片
问题描述:
那么问题是什么。我想从具有特定参数的WinJS列表视图中排除项目(ID - 从JSON传递)。怎么做?WinJs列表视图显示:没有ID的瓦片
事情我已经尝试:
一)将数据推送到someView.itemDataSource过程中它具有这种功能(它的工作的,但看上去很脏)前。
fldView.itemDataSource = this._processItemData(Data.items.dataSource);
....
_processItemData: function (data) {
for (var i = data.list.length; i >= 1; i--) {
if (data.list._groupedItems[i]) {
if (data.list._groupedItems[i].groupKey == 'Folders')
continue;
else {
if (data.list._groupedItems[i].data.folderID) {
data.list.splice(i - 1, 1);
}
}
}
}
return data;
}
B)有两个条件模板的传统方式(不工作):
fldView.itemTemplate = this.getItemTemplate;
....
getItemTemplate: function(promise){
return promise.then(function(item){
var
itemTemplate = null,
parent = document.createElement("div");
if(item.data.folderID){
itemTemplate = document.querySelector('.hideItemTemplate')
}else{
itemTemplate = document.querySelector('.itemTemplate')
}
//console.log(item.data.folderID);
itemTemplate.winControl.render(item.data, parent);
return parent;
})
}
2 HTML模板
<div class="itemTemplate" data-win-control="WinJS.Binding.Template">
<div class="item">
<img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
<div class="item-overlay">
<h4 class="item-title" data-win-bind="textContent: title" style="margin-left: 0px;"></h4>
<h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle" style="margin-left: 0px; margin-right: 4.67px;"></h6>
</div>
</div>
</div>
<div class="hideItemTemplate" data-win-control="WinJS.Binding.Template">
<div class="display-none"></div>
</div>
和CSS显示:无
.hideItemTemplate, .display-none{
display:none;
}
提前致谢!
答
建议要么使用array.filter建设WinJS.Binding.List之前过滤的项目或做列表上的过滤器投射它建成后。如果需要分组,则可以在筛选的列表上完成分组。
var list; // assuming this is all data items
var filteredList = list.createFiltered(function filter(item)
{
if (item.FolderID)
return false;
else
return true;
});
var groups = filteredList.createGrouped(...);
我明天早上检查一下,并给出反馈。谢谢! – karlisup 2013-04-08 08:38:41
真棒,工作! – karlisup 2013-04-10 16:21:16