:point_right: Make sure to first read the introduction to decorators.

This decorator creates two-way bindings within a custom component. Changes to the decorated component property are reflected on the target property of a target element (child) and the other way around. Change events are fired for the decorated component property if (and only if) the target element fires change events.

@bind can by applied to any property of a class decorated with @component. It also implies @property and includes its typeGuard feature. Only one of the two can be applied to the same property.

@bind requires exactly one parameter:


Where options is of the type

  path: "#<targetElementId>.<targetProperty>",
  typeGuard?: Function

Binds the decorated component property to the property <targetProperty> of the target element (descendant widget) with an id of <targetElementId>. The binding is established after append is called the first time on the component, there needs to be exactly one descendant widget with the given id, and it has to have a property of the same type.

A typeGuard. may be given to perform value checks.

As with one-way bindings, setting the component property to undefined resets the target property to its initial value.


Shorthand for @bind({path: path})