javascript - 如何在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 的 data-win-options 字符串中删除 groupDataSource 和 groupHeaderTemplate ，则过滤可以正常工作。如果您使用分组，那么您必须在 WinJS.Binding.List 上调用 createGrouped 并将其用作数据源，否则它的 groups.dataSource 属性将为 null。您引用的示例显示了这一点，但在您的情况下，仅创建了过滤源，没有可使用的分组，并且您会崩溃。

也就是说，使用您展示的 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 和 Semantic Zoom 示例中进行了演示，特别是在 groupedData.js 中。 。当然，这显示了在 WinRT 中执行此操作，而 try.buildwinjs.com 必须是通用的。无论如何，这是我想在本文中提到的分组和排序的一个重要考虑因素。