排序数组项后淘汰js强制重新绑定答案

【问题标题】：knockout js force rebind after sorting array items排序数组项后淘汰js强制重新绑定
【发布时间】：2012-06-11 19:53:59
【问题描述】：

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

有一个排序列表here 的示例，它可以工作。还有another example，但没有。它们之间的唯一区别是 KO 版本。

任何帮助将不胜感激。

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

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

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

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

【问题讨论】：

我不确定您在期待什么，但我在两个页面中看到完全相同的行为。

标签： arrays sorting knockout.js

【解决方案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

【讨论】：