Shared Bindable Data

Neo has a feature that allows shared, bindable, data.

A state provider — Neo.state.Provider — instance holds properties that can be bound to component properties.

View model properties are visible down the containment hierarchy: Properties introduced in a parent container will be available to any child component, and properties introduces in a specific component are only visible to that component. This approach makes it easy to control scope.

In the example above, the main view has a view model that defined a property foo. A view model property is available within the view and its children. The child items — a label and a text field — can bind properties to foo. As foo changes, the properties are automatically updated. The example also shows that a binding can be twoWay, which means a change to the property in the view is pushed to the view model.

(Note that in the example above, the main view's view model is defined in-line. Normally your view model would be coded in its own class that extends 'Neo.model.Component', and you'd use that in your component. Just like with items component configs, trivial configs may be done in-line, and non-trivial configs are usually coded as separate classes.)

Below is another example.

In this case, the main view has three child items of type MyPanel, each containing a label. The main view has a state provider with a foo property, and the third child has its own state provider with a foo property.

MyPanel contains a Neo.componnet.Label whose text value is bound to foo. To resolve the binding, Neo.mjs looks up the containment hierarchy until it finds the value. For the first two panels the label binding looks in the label, then in its MyPanel container, then in the main view — where it finds foo.

For the third child panel the label binding looks in the label, then in its MyPanel, but this time it finds it because the third copy of MyPanel has its own view model with the foo property.

Conclusion

The Neo.mjs state provider and binding approach is simple and powerful. It gives you easy control over the scope of a value, which means you can share properties as globally or narrowly as needed.