KO ObservableArray update breaks when binding with .sort

Question

I'm sorting my ObservableArray in the markup thusly, but for some reason, when I push a new object to the pages ObservableArray, this does not update.

//store.get('pages') returns an ObservableArray

<!-- ko foreach:store.get('pages').sort(function (l , r ) { return l.pageNumber() < r.pageNumber() ? -1 : 1}) -->
    <markup/>
<!--/ko-->

However, when I remove the sort call, it catches the array change just fine. Like so,

//works fine,  updates when item pushed to observableArray
<!-- ko foreach:store.get('pages') -->
    <markup/>
<!--/ko-->

Any idea for a simple workaround?

Edits:

Tried using valueHasMutated(), doesn't force an update either.

Workaround: I ended up moving the sort call into a subscription on the observableArray, and it seems to be working fine now, not sure why though.

Have you tried putting that sort as a computed in your viewmodel? That sort of sort doesn't really belong in the view. — Kyeotic
– Kyeotic, Commented Sep 10, 2013 at 22:28
That didn't do it either, unfortunately. I did find a sort of end-run solution though, thanks! — Kal_Torak
– Kal_Torak, Commented Sep 10, 2013 at 22:41

nwayve · Accepted Answer · 2013-09-10 23:04:13Z

store.get returns an observableArray but store.get(...).sort(...) returns an array. You're effectively making a one way binding like this:

<div data-bind="foreach: ['foo', 'bar']"></div>

Also, although you bind a returned value of a function call, to me it has a code smell that you're coupling your business logic with your view logic. You have something like this:

// View
<div data-bind="foreach: $root.get()"></div>

// Javascript
function ViewModel () {
    var self = this;
    self.get = function () {
        return ko.observableArray();
    };
}

And it works, but from your view, it's unclear what you're doing. I think a better solution would be:

// View
<div data-bind="foreach: stores"></div>

// Javascript
function ViewModel () {
    var self = this;
    self.stores = ko.observableArray();
    self.get = function () {
        var arr = ["foo", "bar"];
        stores(arr.sort(...));// When you do this, KO updates the foreach binding this is bound to
        return stores;// not that you need to, you can access it from the viewModel.
    };
}

Glad you found a workaround but take a minute and plan out your HTML binding structure. It's the first place I start when I'm creating a new view and it drives how I structure my ViewModel.

Collectives™ on Stack Overflow

KO ObservableArray update breaks when binding with .sort

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related