Implicit ViewModel 2-Way Data Bindings

I’ve come across a rather interesting… let’s call it “feature” of ExtJS ViewModel and data binding system. Turns out it is possible to establish “implicit” two-way data binds between parent & child view model data (within same component hierarchy) by setting the data of “lower” view model to “undefined”, so long as the view models both define that data property with the same name. Picture the following simple hierarchy:

• Parent Panel
  • Child Panel

Now imagine that both of the panels define their own ViewModels (implicit or not doesn’t matter) that both define the same two properties, like so:

• Parent Panel
  • undefinedText: “default Parent text”
  • definedText: “default Parent text”
• Child Panel
  • undefinedText: undefined
  • definedText: “default Child text”

This is what the default rendering of these panels would look like:

Read on for a walk through of various scenarios and a Sencha Fiddle…

https://fiddle.sencha.com/fiddle/22di

Note that even though the child panel’s view model’s default value for “undefinedText” data property is undefined, it actually renders with “default Parent text”, which is the default value of its parent’s view model’s “undefinedText” data property. This is an immediate example of the implicit two-way data binding that got established between the “undefinedText” properties of these two view models, because the child one had an undefined value. Now, try clicking the “Change Parent Data” button, which will update both values in the parent view model; the outcome might look something like this:

Note that the child model’s “undefinedText” was updated to reflect parent’s model’s data, whereas the child model’s “definedText” remained intact.

Another interesting experiment to try is to click the “Change Child Undefined -> Defined” button, which will attempt to update the child panel’s view model’s “undefinedText” data value. Note that now you end up with “Child Text Explicitly Set” in both the parent and the child panels, indicating the two-way data binding relationship between this property of the view models:

You can also try the “Change Child Defined -> Undefined” button, for the reverse of the previous experiment. Observe that rather than the child panel displaying “undefined” or just a blank string, as you might expect, it now adopts the parent panel’s view model’s value for the “childDefined” property:

Note the importance of this. By simply setting some view model’s data property to “undefined”, we have now established an implicit two-way data bind to a parent’s view model’s property with the same name (assuming one is present).

This feature can be used to great benefit when you have a hierarchy where it is unclear at which level a certain, let’s say label, will be specified, and hence you can repeat the same property name within multiple view models, with “undefined” initial value, and so long as the topmost view model has the value set, all of the lower-level view models will get that same value as well, along with a two-way data bind benefit that allows them to maintain encapsulated design for interacting with their view model. This feature can also cause some headaches if you’re unaware of it, as it’s basically some hidden magic.