Question

在下一种情况下我迷路了。

我正在使用Knockoutjs（v3.4.2）。我有这个viewmodel：

var vm = {
    items: ko.observableArray([
    { label: "test" },
    { label: "test2" },
    { label: "test3" },
    { label: "test4" }
  ])
};

这个模板：

<div id="vm">

  <ul data-bind="foreach: items, sortable">
    <li data-bind="text: label"></li>
  </ul>

</div>

我的绑定：

ko.bindingHandlers.sortable = {
  init: function(el) {
    let module = this;

        this.sortable = Sortable.create(el, {
        onSort: function(e) {
        //module.sortable.sort(module.sortable.toArray());
        vm.items.removeAll();
      }
    });
    }
};

当我按照示例jQuery UI可排序或在我的情况下：可排序（https://github.com/RubaXa/Sortable）直接操作DOM时，绑定断开。

请参阅我的小jsfiddle：http://jsfiddle.net/wgv76t25/15/

在此示例中，排序后，我从可观察对象中删除了所有项目。您会看到拖动的节点不会被删除。

当然，由于用户界面中的顺序已更改，因此可观察列表不再具有代表性。但是，如果我使用以下方式还原它：

module.sortable.sort(module.sortable.toArray());

然后在第7行上的

断开所有节点与可观察节点的连接。或者，当我将可观察数组调整为正确的顺序时，拖动的DOM节点将断开连接。

问题是：如何将可观察对象与UI绑定？我更喜欢只重新绑定拖动的DOM节点。我试过了： -vm.items.valueHasMutated -ul和/或移动的li`s上的ko.cleanNode -与cleanNode一起在ul上使用ko.applyBinding

cleanNode和applyBindings尝试，DOM节点重复：

ko.cleanNode(document.querySelector("#vm ul"));
ko.applyBindings( vm, document.querySelector("#vm ul") );

这都不行：

ko.cleanNode(document.querySelector("#vm ul"));
ko.applyBindingsToNode( document.querySelector("#vm ul"), vm );
vm.items.remove(vm.items()[1]);

到目前为止没有任何效果，希望有人可以帮助我

淘汰赛JS-操作DOM后失去绑定

0 个答案: