Class ModelBinder<VM>

The bi-directional binding is uni-directional if the element doesn't support user input. That means, you can bind any element. The binding is based on a {@link Proxy} class and requires ES2015 natively.

The binding two a model requires the decorator {@link Viewmodel}. Here you define the type for binding.

@ViewModel(UserModel)
export class Component extends BaseComponent<{}> implements IModel<UserModel>

At any part of your component you can now access a real object that is being synhcronized:

model: ModelBinder<UserModel>;

In the form you define the binding with the property n-bind like this:

<input type="text" n-bind="value: Name" ... />

The property has two parts:

1. The HTML property the value binds to (in the example: value).
2. The model property which is connected (in the example: Name).

The @nyaf/forms library provides few binder functions, that consists of a name (the property name) and a binder logic. For example, the * ValueBindingHandler has the name "value" and reads a value from {@link HTMLInputElement} 's value property. It also contains an event listener, that supervises the input event. Binders for text may not have an event listener and hence bind just uni-directional.

If you need specific binders for custom elements, just create one by implementing the IBindingHandler interface.

class MyHandler implements IBindingHandler {
  // your code here
}

This definition must be added to the local modelbinder instance. The decorator {@link @ViewModel} creates a property model, that provides an instance of {@link ModelBinder,} initialized and bound to the current component. In the component, it's recommended to do this in the Lifecycle.Load step, you can add your custom handler:

@ViewModel(UserModel, { handlers: { 'custom': new CustomHandler() } })

The model property is enforced by the {@link IModel} interface. That's for typing, the actual value is created at runtime from the decorator code.

In the form you can now bind to your custom property of your custom web component.

<app-myinput n-bind="custom: Name" ... />