can-stache-bindings

Use

The can-stache-bindings plugin provides custom attributes useful for template declarative event, one-way and two-way bindings on element attributes, component [can-component::viewModel viewModels], and the scope. Bindings look like:

• (event)="key()" for event binding.
• {prop}="key" for one-way binding to a child.
• {^prop}="key" for one-way binding to a parent.
• {(prop)}="key" for two-way binding.

Prepending $ to a binding like ($event)="key()" changes the binding from the viewModel to the element's attributes or properties.

The following are the bindings that should be used with can-stache and are compatible with the upcoming 3.0 release:

event

Binds to childEvent on <my-component>'s [can-component::viewModel viewModel] and calls method on the scope with the specified arguments:

<my-component (child-event)="method('primitive', key, hash1=key1)"/>

Binds to domEvent on <my-component> and calls method on the scope with the specified arguments.

<my-component ($dom-event)="method('primitive', key, hash1=key1)"/>

one-way to child

Updates childProp in <my-component>'s [can-component::viewModel viewModel] with value in the scope:

<my-component {child-prop}="value"/>

Updates the child-attr attribute or property on <my-component> with value in the scope:

<my-component {$child-attr}="value"/>

one-way to parent

Updates value in the scope with childProp in <my-component>'s [can-component::viewModel viewModel]:

<my-component {^child-prop}="value"/>

Updates value in the scope with the child-attr attribute or property on <my-component>:

<my-component {^$child-attr}="value"/>

two-way

Updates childProp in <my-component>'s [can-component::viewModel viewModel] with value in the scope and vice versa:

<my-component {(child-prop)}="value"/>

Updates the child-attr attribute or property on <my-component> with value in the scope and vice versa:

<my-component {($child-attr)}="value"/>