Binding is what allows us to do <Edit value="{{ message }}">
in the Declarative UI and have it automatically update the edit value when the message value changes. The Bindable component handles all the binding and the callbacks for any bindable properties.
Using binding is actually simple. You need a source object, in this case, the message variable. You need the component itself, so again, in this example, the Edit component. Then, you just use the bind
method on the Edit component to bind the source object to itself. Likewise, if you need to unbind, you would use the method named unbind
.
The final property of the Bindable component is bindingContext,
which is used to set the primary Observable
object of the component and its children. If you recall in the prior chapter, the main-page.js
file executed page.bindingContext = vmModule.mainViewModel
. This code sets the page's bindingContext
to the Observable
object the mainViewModel
file exported. This is needed so that the two...