Knockout js foreach 按字母顺序绑定

Posted 2023-03-27

【中文标题】Knockout js foreach 按字母顺序绑定

【英文标题】：Knockout js foreach binding alphabetically

【发布时间】：2021-12-08 22:33:48

【问题描述】：

我是淘汰赛的新手。

很好，您帮助我了解我需要如何更改此代码：

<ol class="items" data-bind="foreach: getDisplayedItems()">
    <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>

按字母顺序制作？

感谢您的任何提示 问候

【参考方案1】：

您可以就地对它们进行排序：

<ol class="items" data-bind="foreach: getDisplayedItems().sort((a, b) => ko.unwrap(a.label) < ko.unwrap(b.label) ? -1 : 1)">
    <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>

但我认为这很丑陋，而且不可重复使用。最好创建一个新的 observable 数组，其中包含按正确顺序排列的项目：

function App 
    // the observable you already have
    this.getDisplayedItems = ko.observableArray([...]);

    // a computed observable based on that
    this.getDisplayedItemsAlphabetical = ko.pureComputed(() => this.getDisplayedItems.sorted((a, b) => ko.unwrap(a.label) < ko.unwrap(b.label) ? -1 : 1));

和

<ol class="items" data-bind="foreach: getDisplayedItemsAlphabetical">

【讨论】：

小记：您的getDisplayedItemsAlphabetical 纯计算有一个副作用，即在getDisplayedItems 中对数组进行排序（即使它不会在那里触发值突变）。

@user3297291 这是一个非常好的观点，我没有想到这一点。固定！

谢谢大家！它就像一个魅力！ ;)

@Dnc44 getDisplayedItems 是您的视图模型中的常规函数​​还是可观察的？

@Tomalak 是一个函数