使用 jQuery 可排序更新绑定？答案

【问题标题】：Updating binding with jQuery sortable?使用 jQuery 可排序更新绑定？
【发布时间】：2015-09-19 03:38:05
【问题描述】：

我有一个使用foreach 绑定从observableArray 填充的固定装置的可排序列表。数组中每个fixture 的参数之一是position。

该位置反映了灯具的排序顺序。默认情况下，使用foreach插入灯具时，位置编号是正确的，但是当您通过拖动项目对列表进行排序时，位置编号使用 jQuery 更新：

$( "#picks" ).sortable({
    revert: true,
    placeholder: "placeholder",
    containment: 'parent',
    axis: "y",
    handle: '.dragHandle',
    update: function() {
        for (var i = 1; i <= $('#picks li').length; i++) {
            $('#picks li:nth-child('+i+')').find('span.num').text(i);
        }
    }
});

因此，位置编号确实发生了变化，但是由于编号在没有引用可观察对象的情况下更新，因此可观察对象本身不会更新。我的问题是，如何使用与 jQuery 排序相关的更新函数来更新 observable。

我不想将数字作为输入，因此不能选择使用带有值绑定的输入！

Demo Fiddle

【问题讨论】：

尝试在更新方法中手动通知所有fixtures observable数组的订阅者，比如“fixtures.valueHasMutated()”
jQuery 函数在我的 viewModel 之外，所以我不能引用fixtures。我应该在 viewModel 中移动 jQuery 函数来尝试吗？
我尝试了这条路线，但没有达到预期的效果：jsfiddle.net/tsnolan23/rswq1kjt/17
您不需要在视图模型中移动 jquery 代码，而是像 var vm= new view model(); ko.applybindings (VM) 这样创建一个视图模型实例，同时使用 vm 引用 VM 外部的 observables这个vm.fixtures.valueHasMutated().
无论哪种方式，都不是想要的效果，似乎将任何项目放在第一位而不是其他项目

标签： javascript jquery knockout.js

【解决方案1】：

您需要binding handler for your sortable。如果你在绑定处理程序之外弄乱了 DOM，你就会遇到这样的问题。作者甚至在github页面底部提供了一些demo fiddles的链接。

【讨论】：