Strange issue with nested dependentObservables update the model but not the view

[jslaybaugh]

Check out the fiddle at http://jsfiddle.net/jslaybaugh/KBqsA/

I have an object that is a business with multiple member objects inside it. There are type lookups for the business level and the member level. To create the depdendentObservables for the Members, I loop through it with jQuery.each (although I'm sure there's a better way). Anyway, when I was testing, I found that it was working by outputting ko.toJS(viewModel) to the console and seeing that the type was being updated, but the view wasnt reflecting it. Ultimately, through trial and error, I realized the issue reflected on the fiddle. If the span that prints the value is declared in the HTML markup prior to the control that writes to the value, then it doesnt get updated in the view. But it does if its after the control. (note the text after the select gets updated, but not the code prior). And this only happens in the nested objects. Even though the parent object has the exact same logic, it works as expected.

Btw, if there is a better way of creating the dependentObservables besides jQuery.each, I'd love to know what it is. Thanks!!

[rniemeyer]

Here is a little further information about this issue: https://groups.google.com/d/topic/knockoutjs/wOGSQNnyE6Y/discussion

If you put quotes around your Ids like:
"Members":[
{"Name":"Jorin","TypeId":"3"},
{"Name":"Bobby","TypeId":"4"},
{"Name":"Ryan","TypeId":"5"}
]}

It does work.

One option would be to make sure that the update is done after elements are in the DOM by applying it asynchronously.

In the value binding do:

        if(elementValue !== newValue)
            setTimeout(function() { ko.utils.triggerEvent(element, "change") }, 0);

It would be nice though if there was a more generic fix that would protect custom bindings that write to observables from potentially hitting this issue.

[pilavdzic]

I ran into this as well it is a huge pain.

[SteveSanderson]

Thanks for reporting this - I'll investigate.

[SteveSanderson]

This appears to be fixed in KO 1.3. The jsFiddle you provided updates properly if you upgrade it to KO 1.3 beta. Please let me know if you are still able to reproduce anything to do with this issue if you use KO 1.3.

Because the binding algorithm in 1.3 changed pretty significantly so that elements are bound only after they're inserted into the DOM, a whole class of possible quirks just vanishes, and this looks like an example of one of them.