View not updating on observable changed

Question

I'm trying to have a list be rerendered when the container of the list is updated:

{^{for selectedScenario.instances}}
     <div>{^{:name}}</div>
{{/for}}

When I use $.observable(data).setProperty("selectedScenario", scenario), nothing changes. In http://jsfiddle.net/ep76m4af/1/ you can see this in action. ObserveAll shows that the data itself is updated and the event is properly fired.

Answer 1

The reason it is not working is because you are using a 'deep path' selectedScenario.instances - which by default 'listens' to observable changes only at the leaf level, not deeper. To opt in to listening also to changes in the selectedScenario object, not just the leaf instances property, you need to replace the . by ^ to indicate that you want to listen down to a deeper level in the path:

{^{for selectedScenario^instances}}
     <div>{^{:name}}</div>
{{/for}}

See the section Paths: leaf changes or deep changes in this documentation topic: http://www.jsviews.com/#observe.

See also the examples such as Example: JsViews with plain objects and array in this topic: http://www.jsviews.com/#explore/objectsorvm.

Updated jsfiddle here: http://jsfiddle.net/ep76m4af/2/