Jquery ui 淘汰赛；Jquery Listview动态除法器不会更新UI

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

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

我所尝试的： -使用listview（“刷新”）并触发页面创建 -无容器控件-非常适合排序和删除单个项目，但批量删除项目不会更新UI。 -尝试以不同方式处理列表视图的特殊绑定处理程序 -使用jquery自动除法器，但这不会对列表进行排序，因此我会得到相同除法器的倍数。 -自动分割器和foreach的组合：items.sort（等）

---

几天来，我在网上尝试了许多解决方案，但我似乎无法拥有动态分隔器，也无法在分隔器之间移动内容。如果我在分隔器部分之间移动它们之后不必对它们进行排序，这会更容易。。。但一旦某个东西被移动到另一个分隔符，它就需要在该分隔符中进行排序。我希望避免为每个不同类别制作单独的列表/观察。在堆栈溢出问题上提供了很多解决方案，它们适用于那些简单的情况，但在我的情况下不适用。

我建议您在更改

observableArray

并刷新listview内容时，使用knockout

subscribe

更新除法器：

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

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

observearray

：

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

---

这将节省您多次更新UI的时间。

您正在调用

刷新

？是的。已在使用.listview（“刷新”）。在大多数情况下，它可以更新UI，但在动态添加分隔符并与foreach toDo LI元素混合后，它不会更新UI。您是否尝试过

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

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