1

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

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

我尝试过： - 使用 listview('refresh') 和触发页面创建 - 无容器控件 - 非常适合排序和删除单个项目，但批量删除项目不会更新 UI。- 尝试以不同方式处理列表视图的特殊绑定处理程序 - 使用 jquery 自动分隔符，但这不会对列表进行排序，因此我得到多个相同的分隔符。- autodividers 和 foreach 的组合：items.sort(etc...)

<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:";
            }
        });

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

4

1 回答 1

2

我建议您在更改subscribe时使用敲除更新分隔线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);

This will save you from updating the UI multiple times.

于 2013-06-17T04:22:41.290 回答