Question

首先抱歉我的英语不好！

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

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

您可以在此处找到我的代码片段：http://jsfiddle.net/ingro/mz3MK/

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

编辑：尝试将第一个元素（测试＃1）拉到可排序列表的底部。元素的属性“time”保持不变（07:00）。现在将它带到可排序列表的第二个位置，您会注意到属性“time”变为“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]);

原因是文本在该范围内显示的绑定只会评估一次，因为该属性不可观察。

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

2 个答案: