UI 没有用 KnockoutJS 和 JqueryUI Sortable 完全更新

Question

首先对不起我的英语不好！

无论如何，我正在尝试基于 Knockout JS 和 Jquery UI 制作一个简单的任务管理器。 经过一番研究，我发现了一个小插件，可以帮助将 KO 与 JqueryUi 的 sortable 连接起来，你可以在这里阅读：http://www.knockmeout.net/2012/02/revisiting-dragging-dropping-and.html

该插件可以很好地更新可观察数组的顺序，但我还需要根据元素在数组中的位置刷新元素的一些值。我尝试在每次排序后更新整个数组，但我注意到一个奇怪的行为：虽然 UI 保持不变，但如果我将数组发送到 JSON，它会使用正确的值进行更新！

你可以在这里找到我的代码的 sn-p：http://jsfiddle.net/ingro/mz3MK/

尝试移动可排序列表中的一些元素，然后查看 UI 与使用“打印”按钮显示的值之间的差异。

编辑：尝试将第一个元素 (test#1) 拉到可排序列表的底部。元素的属性“时间”保持不变（07:00）。现在将它带到可排序列表的第二个位置，您会注意到属性“时间”变成了“10:00”！实际上，UI 仅在您拖动某些东西时才会刷新，并且只有被拖动的元素才会刷新到拖动之前的状态。但是如果你打印数组的值，你可以看到它总是被刷新：\

感谢任何可以帮助我的人！

Answer 1

据我了解，您需要让时间和标题可见。 考虑更新jsfiddle

var Post = function( time, title) {
    this.time = ko.observable( time );
    this.title = ko.observable( title );
};

然后

self.posts = ko.observableArray( ko.utils.arrayMap( posts , function( post ) {
        return new Post( post.time, post.title);
}));

然后你就可以使用可观察的更新语法了：

post.time(self.times()[count]);

此外，您可能会发现此淘汰待办事项应用示例 TodoApp 对您有所帮助

Answer 2

您需要使帖子中的时间属性可观察，并更改更新方式，如this fiddle：

之前：

self.posts = ko.observableArray([
    {time: "07:00", title: "test#1"},
    {time: "08:00", title: "work#2"},     
    {time: "09:00", title: "task#3"},    
    {time: "10:00", title: "sleep#4"}
]);

。 .

post.time = self.times()[count];

之后：

self.posts = ko.observableArray([
    {time: ko.observable("07:00"), title: "test#1"},
    {time: ko.observable("08:00"), title: "work#2"},     
    {time: ko.observable("09:00"), title: "task#3"},    
    {time: ko.observable("10:00"), title: "sleep#4"}
]);

。 .

post.time(self.times()[count]);

这样做的原因是，要在该范围内显示的文本绑定只会计算一次，因为该属性是不可观察的。