3

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

这里有一个排序列表的例子，它可以工作。还有另一个例子，它没有。它们之间的唯一区别是 KO 版本。

任何帮助，将不胜感激。

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

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

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

有没有更优雅的方式来强制重新绑定？

4

1 回答 1

4

我相信这里发生的事情是，当您将新项目拼接到列表中时，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
      });

你可以在这里看到这个工作

于 2012-06-11T11:53:59.257 回答