Question

淘汰js遇到麻烦。但在我看来这是一个错误。也许有一些解决方法。

有一个排序列表here的例子，它有效。并且有another example但事实并非如此。它们之间的唯一区别是KO的版本。

任何帮助都将不胜感激。

更新我不知道原因，但在调用splice方法后，KO以某种不正确的方式刷新绑定。所以我找到的解决方法 - 强制重新绑定数组模型。

我用来强制重新绑定的代码如下：

        // newArray is ko.observableArray([...])
        var original = newArray();
        newArray([]);
        newArray(original); // KO will rebind this array

是否有更优雅的方法来强制重新绑定？

Answer 1

我相信这里发生的事情是Knockout 2.1在将新项目拼接到其中时正确地更新了列表，但是jQuery UI可排序实现也将项目添加到新列表中。

为了解决这个问题，我在可排序实现添加的项目中添加了一个“拖动”类，然后在更新两个数组后将其删除（这会导致按预期更新UI）。

    $list
      .data('ko-sort-array', array)
      .sortable(config)
      .bind('sortstart', function (event, ui) {                  
        ui.item.data('ko-sort-array', array);
        ui.item.data('ko-sort-index', ui.item.index());
        ui.item.addClass('dragged'); // <-- add class here
      })
      .bind('sortupdate', function (event, ui) {
        var $newList = ui.item.parent();
        if($newList[0] != $list[0]){ return; }

        var oldArray = ui.item.data('ko-sort-array');
        var oldIndex = ui.item.data('ko-sort-index');

        var newArray = $newList.data('ko-sort-array');
        var newIndex = ui.item.index();

        var item = oldArray.splice(oldIndex, 1)[0];
        newArray.splice(newIndex, 0, item);
        $list.find('.dragged').remove(); // <-- remove the item added by jQuery here
      });

您可以看到此工作here

在排序数组项后，knockout js强制重新绑定

1 个答案: