如何在 WinJS 中为 ListView 制作排序功能？答案

【问题标题】：How to make sorting function for ListView in WinJS?如何在 WinJS 中为 ListView 制作排序功能？
【发布时间】：2015-01-11 11:09:50
【问题描述】：

我有以下清单：

var myData = new WinJS.Binding.List([
  { title: "001", text: "one", picture: "/images/001.png" },
  { title: "009", text: "nine", picture: "/images/009.png" },
]);

我尝试使用此代码过滤我的列表，但失败了：

var filtered = myData.createFiltered(function (item) {
    return item.title == "001";
});

WinJS.Namespace.define("Sample.ListView", {
    data: filtered
});

如何使“createFiltered”功能起作用？

【问题讨论】：

您能否展示您的 ListView HTML 以及您如何为其分配数据源？
@ Kraig Brockschmidt 当然，这里是：`

`顺便说一句，我用this sample。

标签： javascript listview windows-phone-8.1 winjs

【解决方案1】：

根据您在此处显示的内容，问题不在于过滤，如果我从 ListView 的 data-win-options 字符串中删除 groupDataSource 和 groupHeaderTemplate，过滤可以正常工作。如果您使用分组，那么您必须在 WinJS.Binding.List 上调用 createGrouped 并将其用作数据源，否则它的 groups.dataSource 属性将为空。您引用的示例显示了这一点，但在您的情况下，仅创建了一个过滤源，没有可使用的分组，您会遇到崩溃。

也就是说，对于您显示的 JS，以下 HTML 可以正常工作，因为我省略了组引用：

    <div class="smallListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
    <div class="smallListIconTextItem">
        <img src="#" class="smallListIconTextItem-Image" data-win-bind="src: picture" />
        <div class="smallListIconTextItem-Detail">
            <h4 data-win-bind="textContent: title"></h4>
            <h6 data-win-bind="textContent: text"></h6>
        </div>
    </div>
</div>

<div id="listView" class="win-selectionstylefilled"
     data-win-control="WinJS.UI.ListView"
     data-win-options="{ itemDataSource: Sample.ListView.data.dataSource,
        itemTemplate: select('.smallListIconTextTemplate'),
        selectionMode: 'none', tapBehavior: 'none', swipeBehavior: 'none',
        layout: { type: WinJS.UI.ListLayout, groupHeaderPosition: 'top'} }">
</div>

这是来自 try.buildwinjs.com 的示例，它进行分组（并假定英语排序顺序）：

var grouped = myData.createGrouped(function (item) {
    return item.title.toUpperCase().charAt(0);
}, function (item) {
    return {
        title: item.title.toUpperCase().charAt(0)
    };
}, function (left, right) {
    return left.charCodeAt(0) - right.charCodeAt(0);
});

WinJS.Namespace.define("Sample.ListView", {
    data: grouped
});

顺便提一下，这个分组功能不是世界通用的，因为它假设基于 ASCII 位置的排序顺序。真正的排序函数应该考虑本地化排序顺序，这在 Windows SDK HTML Listview Grouping and Semantic Zoom 示例中进行了演示，特别是在groupedData.js 中。当然，这表明在 WinRT 中执行此操作，而 try.buildwinjs.com 必须是通用的。无论如何，这是我想在本文中提到的分组和排序的一个重要考虑因素。

【讨论】：