淘汰 observableArray 排序未反映在 UI 中（foreach 绑定）答案

【问题标题】：Knockout observableArray sort not reflecting in the UI (foreach binding)淘汰 observableArray 排序未反映在 UI 中（foreach 绑定）
【发布时间】：2015-07-14 16:36:34
【问题描述】：

我正在将数据从网格添加到标签列表中（通过检查数据行）。发生这种情况时，我希望对标签列表进行排序（例如按名称字母顺序排序）。

排序结果显然必须反映在 UI 中，但从我的尝试来看，这在我的情况下不起作用。

这是小提琴的例子：http://jsfiddle.net/hLpLobo2/5/

为了确保它已排序，我在 foreach afterAdd 回调上调用了 sortPersonsAlphabetically 函数：

<div class="tag-list" data-bind="foreach: { 
                                data: tags, as: 'tag',
                                afterAdd: sortPersonsAlphabetically
}">
    <div class="tag-item">
        <span class="tag-item-value tag-item-value-name" data-bind="text: tag.name"></span>
        <span class="tag-item-separator">:</span>
        <span class="tag-item-value tag-item-value-age" data-bind="text: tag.age"></span>
    </div>
</div>

但奇怪的是，这只有在添加另一个项目（“第二个选择”）后才有效。

在我提供的小提琴示例中，我还添加了一个 <pre> 标记，很明显数组已正确排序，但它并未反映在标记列表 UI 中。

我还尝试将排序函数封装在延迟为 1 毫秒的 setTimeout 中，这似乎可以解决问题，但会出现一些明显的闪烁，在我看来，这是不可接受的，它更像是一种 hack。

有没有干净的方法来做到这一点？

【问题讨论】：

标签： javascript html sorting knockout.js

【解决方案1】：

Afteradd 真正用于更新 DOM 以响应数据的变化，而不是对数据进行进一步的更改。不过，我同意你得到的结果很奇怪。

我建议你使用计算来生成排序标签，

self.sortedTags = ko.computed(function () {
    var data = self.tags();
    return data.sort(function(left, right) {
        return left.name == right.name ? 0 : (left.name < right.name ? -1 : 1);
    });
});

并在你的 foreach 中显示：

<div class="tag-list" data-bind="foreach: { 
                                data: sortedTags, as: 'tag'
}">

http://jsfiddle.net/hLpLobo2/6/

【讨论】：