microsoft-metro - winJS ListView动态数据源编辑问题

Question

winJS ListView 问题

我正在开发一个 winJS 应用程序。我有列表视图。我需要将新数据添加到现有列表视图中。我该怎么做？

Answer 1

通常列表视图与WinJS.Binding.List绑定，只需将新项目添加到该列表中，它们就会出现在列表视图中。

Answer 2

建议先使用 WinJS.Binding.List.createSorted() 并在排序列表上创建分组。如果您的排序功能可以确保新插入的项目按排序顺序排在前面 - 它应该出现在组中的第一位。

_initializeListView: function initializeListView()
    {
        var data = [{ title: 'parle-ggg', brand: 'parle' }, { title: 'parle-gg', brand: 'parle' }, { title: 'parle-g', brand: 'parle' },
            { title: 'maggi-sauce', brand: 'maggi' }, { title: 'maggi-sauce-2', brand: 'maggi' }, { title: 'maggi-sauce-3', brand: 'maggi' }];
        var list = new WinJS.Binding.List(data);
        var sortedList = list.createSorted(function sorter(item1, item2)
        {
            var result;
            if (item1.title < item2.title) 
                result = -1;
            else if (item1.title == item2.title)
                result = 0;
            else
                result = 1;

            return result;
        });
        var groups = sortedList.createGrouped(
            function groupKey(item)
            {
                return item.brand;
            },
            function groupData(item)
            {
                var result = { title: item.brand };
                return result;
            }
            );
        listView.winControl.itemDataSource = groups.dataSource;
        listView.winControl.groupDataSource = groups.groups.dataSource;
        this.sortedList = sortedList;
    },
    _oncmdclick: function oncmdclick(event) // this is event handler where you want to add new item
    {
        this.sortedList.push(newItem);
    },

上面的代码片段试图创建一个按标题排序并按品牌分组的列表。稍后在 sortedList 中插入项目时 - 插入的项目被正确放置在组中。例如 - 按标题“parle-f”添加项目会将其放在 parle 品牌组中的首位，而按标题“parle-h”添加项目会将其放在 parle 品牌组中的最后。

HTH。