Observable

Summary

The Observable class provides a simple wrapper with two methods, setValue and getValue, and fires a change event when the value changes.

When dealing with literals, there is no "object" that can be passed around to represent the value, and as such changing the value can't easily be reflected in more than one place.

To compensate, we can wrap shared literal values in an Observable class within a ViewModel. This gives the ViewModel something to observe, allowing it to notify the View when the value changes.

Example usage

In the src/Foo/FooModel.ts:

class FooModel extends ViewModel {
    isInfoPaneVisible = new Observable('true');
}

In the src/Foo/FooModel.html:

<div js-type="Foo">
    <toggle-button js-init="{ name: 'click me', isToggled:isInfoPaneVisible }" />
    <div js-bind="text:isInfoPaneVisible></div>
</div>

When the toggle button wants to change its "isToggled" state, the observable is detected, setValue is called, a change event fires, and FooModel can update the div's text to the boolean state.