Jquery 更新数据属性时击出Js更新视图模型

我正在使用jQuery UI Sortable和KnockoutJS ViewModel

我在ViewModel中有一个数组，用于显示一个Div，用户可以通过jQueryUI Sortable对这些Div进行排序

我在JSFIDLE中创建了一个类似的场景：

在这一行代码上：$（sortables[i]）.attr（'data-id'，i+1）

我正在更新div的attr:

数据id

。但这在ViewModel中不起作用

如果在Div上执行Inspect元素，则当

Charles

移动到第三位置时，

data id=3

---

这是因为jquery脚本在html Dom准备就绪之前运行。

---

您可以将您的anonimous函数放在“setTimeout”中。这是一种不好的做法，但首先会起作用-如果您要更改属性，则不会更新基础ViewModel（这是正确的，将属性从代码更新为更改ViewModel的想法违反了MVVM模式的概念-在您的代码中，您应该更改ViewModel，而knockout将为您更新View）

关于你的例子，你有两个问题：

索引是纯整数，您应该将其定义为可观察的，即

index: ko.observable(1)

不应更新数据id，而应使用ko.dataFor实用程序函数，并更新ViewModel:

ko.dataFor(this).index(i+1);

整个样本：

---

注意：也考虑使用插件，它也支持排序——请看，这比将jQuery UI与KokOutt混合要好得多。为什么？我会发布一个答案，但这篇博文有很多有用的信息，所以我将只与大家分享。。简而言之，您的情况需要一个bindingHandler，这在链接中有介绍。@DawoodAwan有人认为vtc“太宽了”。这个问题有点混乱，但我认为它不是太宽泛。我的jQuery运行良好，它更新了数据id属性，ViewModel没有更新DOM元素的更新属性，您希望在视图模型中发生什么效果？是的，我使用Knockout:：data bind=“attr:{data-id'：index}”这个“数据id”进行绑定由敲除数组索引呈现，之后由html DOM上的jquery更改。您不能通过使用jquery更改DOM元素来对敲除viewModel作出反应

ko.dataFor(this).index(i+1);

ko.applyBindings({
    items: ko.observableArray([{
        ThisText: 'Bert',
        index: ko.observable(1)
    }, {
        ThisText: 'Charles',
        index: ko.observable(2)
    }, {
        ThisText: 'Denise',
        index: ko.observable(3)
    }])
});


$(function () {
    $(".sortable").sortable({
        forceHelperSize: true,
        revert: true,
        stop: function (event, ui) {
            var sorter = $(this);
            var sortables = sorter.children();

            sortables.each(function (i) {
                // HERE I Update the data-id attribute
                ko.dataFor(this).index(i+1);
            });
        }
    });
});