代码之家 › 专栏 › 技术社区 › karlisup

WinJs列表视图显示:没有ID的磁贴

winjs windows-store-apps listview javascript

karlisup · 技术社区 · 13 年前

那么问题出在哪里呢。我想从WinJS列表视图中排除具有特定参数的项(ID-从JSON传递)。如何做到这一点?

我尝试过的事情:

a) 在将数据推送到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;
}

提前谢谢!

1 回复 | 直到 13 年前

Sushil 13 年前

建议在构建WinJS.Binding.List之前使用筛选项目 array.filter 或者在列表建立后对其进行过滤投影。如果需要分组,则可以对过滤后的列表进行分组。

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(...);