Nested ViewModels

[TradeArcher2020]

I have a ViewModel defined that contains two sub-ViewModels as properties like this:

var vm = function () {
  var self = this;
  self.subVM1 = new SubVM1();
  self.subMV2 = new SubMV2();

  ko.track(self);
};

Both SubVM's are structured the same way as a normal VM and both call ko.track(self) as well.

In my markup, I am trying to use the "with:" syntax to specify the use of one of the SubVMs like so:

<div data-bind="with: SubVM1">
<h1 data-bind="text: SomePropertyOnSubVM1"></h1>
</div>

This binds initially just fine. However, when SomePropertyOnSubVM1 changes, the UI is not updated. This worked fine when I put the property directly on the main ViewModel and not on the Sub-ViewModel.

Any suggestions? Is this a known issue?

[ghost]

You have to track each submodel explicit, if you want to observe it. It's the same useful behavior without ECMA5:

self.subVM1 = ko.track(new SubVM1());

[archangel-irk]

Soon, I will make small changes so that you can bypass the objects recursively.

[unsafecode]

+1

[nathanboktae]

This is implemented as of bcf8f67

[archangel-irk]

@nathanboktae Yes, you are right.