如何在WinJS中实现ListView的排序功能？

Question

我有以下列表：

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"功能发挥作用？

Answer 1

根据您在此处显示的内容，问题不在于过滤，如果我从 ListView 的数据获胜选项字符串中删除 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 必须是通用的。无论如何，这是我想在此上下文中提及的分组和排序的重要考虑因素。

如何在WinJS中实现ListView的排序功能？

How to make sorting function for ListView in WinJS?

javascript

listview

winjs

windows-phone-8.1