按字母顺序敲除js foreach绑定
Knockout js foreach binding alphabetically
我是淘汰赛新人。
很好,你帮助我理解了我需要如何更改此代码:
<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>
要按字母顺序排列吗?
感谢任何提示
问候
您可以就地对它们进行排序:
<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>
但我认为那很丑陋,而且不可重复使用。最好制作一个新的可观察数组,其中包含按正确顺序排列的项目:
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">
我是淘汰赛新人。
很好,你帮助我理解了我需要如何更改此代码:
<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>
要按字母顺序排列吗?
感谢任何提示 问候
您可以就地对它们进行排序:
<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>
但我认为那很丑陋,而且不可重复使用。最好制作一个新的可观察数组,其中包含按正确顺序排列的项目:
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">