Javascript 剔除不在UI中反映的Array排序（foreach绑定）

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

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

下面是小提琴的例子：

为了确保它已排序，我正在调用

foreach

afterAdd

回调上的

sortperson（按字母顺序）

函数：

<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>

:

但奇怪的是，只有在添加了另一项（“第二项选择”）之后，这种方法才会起作用

在我提供的fiddle示例中，我还添加了一个

标记，在该标记中可以清楚地看到数组已正确排序，但它没有反映在标记列表UI中

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);
    });
});

我还尝试过将sort函数包装在一个1ms延迟的

setTimeout

中，这似乎可以解决它，但有一些可见的闪烁，在我看来，这是不可接受的，更像是一种黑客行为

---

有没有一种干净的方法可以做到这一点？

Afteradd实际上是为了更新DOM以响应数据的更改，而不是为了进一步更改数据。不过，我同意你得到的结果很奇怪

我建议您使用计算机生成已排序的标记

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

self.sortedTags=ko.computed（函数（）{
var data=self.tags（）；
返回数据。排序（函数（左、右）{
返回left.name==right.name？0：（left.name

并在foreach中显示：