Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

96
Views
Knockout js foreach binding alphabetically

I'm totally new in knockout.

Good you help me to understand how I need to change this code:

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

to make it in alphabetically order?

Thanks for any tips Regards

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

You could sort them in-place:

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

but I think that's ugly, and it's not re-usable. It's better to make a new observable array that contains the items in the right order:

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

and

<ol class="items" data-bind="foreach: getDisplayedItemsAlphabetical">
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!