Sorting an observableArray for one of the templates

Question

I have the following view model:

function instance(id, FirstName){
    $.extend(this, {
        id: ko.observable(id || ''),
        FirstName: ko.observable(FirstName || '')
    });
}

I have some instances in an observableArray:

 ko.observableArray([new instance(...), new instance(...), ...]

With the following template:

<ul data-bind='template: {name: "instanceTemplate", foreach: instances}'></ul>

And another template:

<ul data-bind='template: {name: "anotherInsTmpl", foreach: instances}'></ul>

In first ul I need to render templates without sorting, in the second one render sorted by FirstName.

Can anyone explain how to do it?

Matthew Nichols · Accepted Answer · 2013-01-15 17:04:42Z

34

One option would be to add a dependentObservable that represents the sorted array. It would look something like:

viewModel.sortFunction = function(a, b) {
        return a.FirstName().toLowerCase() > b.FirstName().toLowerCase() ? 1 : -1;  
};

viewModel.sortedInstances = ko.dependentObservable(function() {
    return this.instances.slice().sort(this.sortFunction);
}, viewModel);

So, do a case insensitive comparison of the value of the FirstName observable of each item. Return a copy of the array (slice(0)) that is sorted (don't want to sort the real array).

Sample here: http://jsfiddle.net/rniemeyer/93Z8N/

Note regarding Knockout Version 2.0 and greater: ko.dependentObservable is now ko.computed. See Dependent Observables

edited Jan 15, 2013 at 17:04

Matthew Nichols

5,0355 gold badges44 silver badges50 bronze badges

answered Aug 6, 2011 at 11:39

RP Niemeyer

115k18 gold badges295 silver badges212 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andrey Over a year ago

Tnx, RP Niemeyer. This is what I wanted:)

Collectives™ on Stack Overflow

Sorting an observableArray for one of the templates

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related