Question

免责声明：这是我关于堆栈溢出的第一篇文章，如果我没有提供足够的信息，请耐心等待。

问题：我试图在listview中使用knockout JS observable数组填充动态数量的分隔符。我可以添加分隔符然后对列表进行排序，但每当我批量删除“已完成”项目（这是待办事项列表）时，它们都不会被删除。淘汰模型已更新，但UI不会更新。如果我不使用分频器那么一切都只是很好的。我试图实现的基本功能是有一个动态数量的分频器列表，我可以在分频器之间移动项目。我认为这与项目的分类有关

我尝试过： - 使用listview（'refresh'）和触发页面创建 -Containerless control - 适用于排序和删除单个项目，但批量删除项目不会更新UI。 - 尝试以不同方式处理列表视图的特殊绑定处理程序 - 使用jquery自动分频器但是这不会对列表进行排序，所以我得到相同分频器的倍数。 - 组合autidividers和foreach：items.sort（等等......）

<ol data-role="listview" data-divider-theme="b" id="ToDoListView" data-autodividers="true" data-inset="true" data-bind="foreach: items.sort(function(l,r) {return l.finished() ? 1 : 0})" >

.. li元素存在于此处等。

  $("#ToDoListView").listview({
            autodividers: true,
            autodividersSelector: function (li) {
                return $(li).hasClass('finishedItem') ? "Done:" : "To Do:";
            }
        });

我已经在线尝试了很多解决方案，但我似乎无法拥有动态分频器并能够在分频器之间移动内容。如果我在分隔符部分之间移动它们之后不必对它们进行排序会更容易...但是一旦某些东西被移动到另一个分隔符，它就需要在该分隔符内进行排序。我想避免为每个不同的类别制作单独的列表/可观察量。堆栈溢出提供了很多解决方案，它们适用于那些简单的情况，但不适用于我的。

Answer 1

我建议您在更改subscribe并刷新listview内容时使用knockout observableArray更新分隔符：

items.subscribe(function (newItems) {
    $("#toDoList").listview({
        autodividers: true,
        autodividersSelector: function (li) {
            return $(li).hasClass('finished') ? "Done:" : "To Do:";
        }
    }).listview("refresh");
});

要将列表保持在已排序状态，当您向/从中推送/删除某些内容时，您应该使用已排序的值更新observableArray：

var itemsArray = items();
itemsArray.push(newItem);
itemsArray.sort();
items(itemsArray);

这样可以避免多次更新UI。

KnockoutJs＆amp; Jquery Listview动态分隔符不会更新UI

1 个答案: