Question

I’m trying to create a page with a button which, when clicked, opens a modal dialog box that allows a user to search for products and add selected search results to an order.

I’ve created what I thought would work (jsfiddle sample), however the search results table, which is bound to an observableArray, does not update.

If I remove the data-bind attribute from the <div id="myDialog"/> then the search results table updates correctly.

Also, I could only get the jsfiddle sample to repeat the same behaviour by placing the JavaScript in the body (framework option no wrap (body)), even though the script is loaded during the ready() callback in the actual implementation.

Where am I going wrong?

(I’ve posted all my code here.)

Update:

It seems like the Knockout foreach binding fails to see the updates to the observableArray. I’ve created my own binding (updated jsfiddle sample) template which almost does what I want, but is not very satisfactory.

How can I get the foreach binding to recognise when the collection has changed?

Answer 1

Here is your broken sample with a minor modification to call the .dialog() in a setTimeout: http://jsfiddle.net/rniemeyer/YuV55/5/. The jQuery UI dialog functionality moves the element to the bottom of the page, so it can mess up the bindings as the initial pass of ko.applyBindings hits it for a second time.

Here is another sample that calls ko.applyBindings specific to a container element (without the setTimeout): http://jsfiddle.net/rniemeyer/YuV55/6/. This means that ko.applyBindings won’t hit the moved dialog the second time, as it will be outside of the container element.