Knockout.js的foreach绑定如何实现列表按字母顺序排序

要实现foreach渲染的列表按字母顺序排列，核心是给绑定的数组提前按展示字段做排序，推荐将排序逻辑放在ViewModel内维护，视图层更简洁易维护，具体方案如下：

方案1：视图层快速修改（临时调试用） #

直接修改foreach的绑定表达式，对返回的数组做排序即可，修改后的绑定代码如下：

<ol class="items" data-bind="foreach: getDisplayedItems().sort((a, b) => a.label().localeCompare(b.label()))">

注意：如果你的label字段不是Knockout可观察对象（observable），请去掉label后的括号，写为a.label.localeCompare(b.label)即可。

方案2：ViewModel层定义计算属性（生产环境更推荐） #

在ViewModel内新增一个计算属性返回排好序的数组，避免修改原始数据源，也方便逻辑复用：

1. 给ViewModel添加computed属性：

this.sortedDisplayedItems = ko.computed(function() {
  // 先浅拷贝原始数组，避免sort的原地修改影响原始数据源
  const rawItems = this.getDisplayedItems().slice();
  // 按label字段的字母顺序排序
  return rawItems.sort((a, b) => {
    // 大小写不敏感排序可在获取label后加.toLowerCase()
    const labelA = a.label(); // 非observable去掉括号
    const labelB = b.label(); // 非observable去掉括号
    return labelA.localeCompare(labelB);
  });
}, this);

2. 修改视图层的绑定属性，用新的计算属性即可：

<ol class="items" data-bind="foreach: sortedDisplayedItems">
    <li class="item">
        <a class="simple" data-bind="html: label, attr: {href:url}, visible: count >= 1, css: { active: is_selected }"></a>
        <span class="count" data-bind="text: count"></span>
    </li>
</ol>

额外调整说明 #

• 若需要降序排列，把labelA.localeCompare(labelB)改为labelB.localeCompare(labelA)即可
• 若排序依据不是label字段，替换成你需要的对应字段即可

内容的提问来源于stack exchange，提问作者Dnc44