UI not updating when observable array changes

[Kevin Boucher]

I'm working on a continuous scrolling search results page, and cannot seem to get the results to update when the observable array has a new value pushed to it.

I'm still learning how to write apps using Knockout.js, so I might be missing something obvious. I have been through the tutorials a few times, though and believe the code I have should work.

I have a JSFiddle example here: http://jsfiddle.net/kboucher/UMLDy/

Any help would be greatly appreciated.

[Joe Feser]

Use  self.results.push instead of  self.results().push( 

[Kevin Boucher]

Hmm, unfortunately when I try it that way I get the foolowing error:

Error: TypeError: self.results.push is not a function

[Joe Feser]

Change it to an  observableArray 

[Kevin Boucher]

Rats! I was feeling really good about that suggestion. Unfortunately, that didn't seem to fix it.

[Kevin Boucher]

But it DOES work when I try both of your suggestions. (Changed self.results().push back to self.results.push again and it works now. Thanks!

[Joe Feser]

It will only work with both of my suggestions.

I had the same issue the first time I used knockout.

[Kevin Boucher]

Yeah, I'm still a bit confused about when I need to refer to a ko property as a function vs a property name.

Good stuff, though. Thanks again.

[Joe Feser]

Arrays are the only thing that you call like normal.

the only time you call the collection is to reset it

self.arrayProperty([]);

and if you need to get the length

self.arrayProperty.length always returns 0

self.arrayProperty().length returns correct length

These are the two big other gotchas :)

[Casey Corcoran]

I'm currently building a companion library for Knockout and mirroring the build setup, unit tests etc (which is all very nice btw) and am learning a lot of JS in the process :)

I've been able to find answers for most things (like !function(){...) but am wondering about this one...

ko.utils = new (function () {

Why is the "new" operator needed/used with the closure here?

Please excuse my noob-ness...

Casey Corcoran

casey.c...@gmail.com

[ry...@ryanrahlf.com]

This is a great "getting started with knockout" question.  

The issue you're running in to is that you're not calling the "push" method that you want to be calling.  While JavaScript arrays have a push method, Knockout observableArray has its own push method.  If you want the UI to update, you want the Knockout push method.

To learn more you can read my blog post about this exact issue, but to quickly fix your code you should change

self.results().push(...)

to

self.results.push(...)