0

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

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

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

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

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

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

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

4

2 回答 2

2

据我了解这个问题，您需要让时间和标题可见。考虑更新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]);

您也可能会发现这个淘汰赛 todo 应用示例TodoApp 很有帮助

于 2012-06-05T19:06:45.953 回答
2

您需要使帖子中的时间属性可观察，并更改更新它的方式，如下面的小提琴：

前：

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]);

这样做的原因是，在该跨度中显示的文本绑定只会评估一次，因为该属性是不可观察的。

于 2012-06-05T19:14:27.190 回答