arrays - 排序数组项后 knockout js强制重新绑定(bind)

Question

在使用 knockout js 时遇到问题。但在我看来这是一个错误。也许有一些解决方法。

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

如有任何帮助，我们将不胜感激。

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

我用来强制重新绑定(bind)的代码如下:

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

是否有更优雅的方式来强制重新绑定(bind)？

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