atril

Databinding

The library has one-way and two-way databinding. They're implemented as custom attributes, and you can add your own binding types.

bind.*

One-way binding. Generally more efficient than two-way binding and is therefore recommended for the majority of data bingings outside inputs.

Binds a property of the target element, such as hidden, to an expression evaluated against the surrounding scope (usually a viewmodel). If the target element has its own viewmodel (in other words, it's a custom element), its property is also bound. See @bindable below.

This works for nested properties like style.background-color. Properties that are camelCased in JS must be kebab-cased in the attribute. To sync the value in the other direction, use an event handler with the built-in on.* attribute.

Example:

<!-- Bind a nested property -->
<p bind.style.background-color="color">My background color is: {{color}}</p>
<input bind.value="color" on.input="color = this.value">

twoway.*

Two-way binding. For known input types, this is equally as efficient as one-way binding. Recommended for form inputs.

Binds a property of the target element, such as hidden or style.background-color, to a property in the current scope / current viewmodel. Just like bind.*, it also binds the same property of the target element's viewmodel, if any; see @bindable. twoway.* automatically syncs these properties between each other.

<p>My name is: {{name}}</p>
<input twoway.value="name">

@bindable

Declares a viewmodel property as bindable, so it can be set from the outside via bind.* or twoway.*.

import {Component, bindable} from 'atril';

@Component({tagName: 'my-element'})
class ViewModel {
  @bindable myProperty;
}

var Component = require('atril').Component;

Component({tagName: 'my-element'})(ViewModel);

function ViewModel() {}

ViewModel.bindable = ['myProperty'];

Then you can bind that property from the outside:

<my-element bind.my-property="outerProperty"></my-element>