Bindings

Rico Suter edited this page May 29, 2015 · 7 revisions

The framework uses KnockoutJS for one-way and two-way bindings. Check out the KnockoutJS documentation for more information about how to use and bind to observables.

One-time-to-target binding

A value which is evaluated only once when the view is initialized or loaded.

Declaration in custom tag:

<vs-my-view label="MyLabel" />

Access the value in the view model:

label: string; 

initialize() {
    this.label = this.parameters.getString("label", "myDefaultValue");
}

One-way-to-target binding

In a one-way-to-target binding, the value flows from the source to the target which means that the view can react to changes from outside.

Declaration in custom tag where myLabel must be an observable defined on the view's view model:

<vs-my-view label="{myLabel}" />

Access the value in the view model and register for change event:

label: KnockoutObservable<string>;

initialize() {
    this.label = this.parameters.getObservableString("label", "myDefaultValue");
    this.subscribe(this.label, () => {
        // TODO: Handle label value change
    });
}

One-way-to-source binding

In a one-way-to-source binding, the value flows from the target to the source which means that the view writes values back to the client.

label: KnockoutObservable<string>;

initialize() {
    this.label = this.parameters.getObservableString("label", "myDefaultValue");

    ...        
    this.label("newValue"); // Write value back
}

Two-way binding

A two-way binding is the combination of a one-way-to-target and a one-way-to-source binding.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.