javascript - Sorting Observable Array in Knockouts JS -

ok... i'm using twitter bootstrap. have observable array represents set of groups. in ui, observablearray being used render "tab" , "tab-pane" each group. can sort , display these groups name property, no probs, doddle right!

<ul data-bind="foreach: myarray().sort(function (l, r) { return l.name() > r.name() ? 1 : -1 })" class="nav nav-tabs" role="tablist">     <li data-bind="text: name"></li> </ul> 

that's great... however, have 'all' object in same array needs @ beginning of set of tabs being displayed.

tabs looks this... | | b | c | d

need this... | | b | c | d

any ideas? :-/

tweak sort function. in oo fashion, "all" object have property indicates should ordered @ top. alternatively, quick , dirty way go tweak sort function this:

function (l, r) {     if (l.name === "all") return 1;     if (r.name === "all") return -1;     return l.name().localecompare(r.name()); } 

i think got +1/-1 logic right, you've got unit tests work out details, right? ;)

as side note, i'd use localecompare function compare strings.

---

seconding @mattburland's comment, should move sorting logic view model (this required anyways unit test it). in addition, note sort sort array itself, , can call sort on observable (without invoking function observable's value), sort contents of observable.

here's like:

function viewmodel(items) {    var self = this;    self.myarray = (items);    self.myarray.sort(function (l, r) {        if (l.name() === "all") return -1;        if (r.name() === "all") return 1;        return l.name().localecompare(r.name());    });  };    var vm = new viewmodel([    { name: ko.observable("b") },    { name: ko.observable("a") },    { name: ko.observable("all") }  ]);    ko.applybindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>    <ul data-bind="foreach: myarray" class="nav nav-tabs" role="tablist">      <li data-bind="text: name"></li>  </ul>

or this, if use oo approach:

function viewmodel(items) {    var self = this;    self.myarray = (items);    self.myarray.sort(function (l, r) {        if (!!l.isspecialoption) return -1;        if (!!r.isspecialoption) return 1;        return l.name().localecompare(r.name());    });  };    var vm = new viewmodel([    { name: ko.observable("b") },    { name: ko.observable("a") },    { name: ko.observable("all"), isspecialoption: true }  ]);    ko.applybindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>    <ul data-bind="foreach: myarray" class="nav nav-tabs" role="tablist">      <li data-bind="text: name"></li>  </ul>