Use

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

• on:event="key()" for event binding.
• prop:from="key" for one-way binding to a child.
• prop:to="key" for one-way binding to a parent.
• prop:bind="key" for two-way binding.

Note: DOM attribute names are case-insensitive, but ViewModel or scope properties can be camelCase and stache will encode them so they work correctly in the DOM.

The following are the bindings that should be used with can-stache:

event

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

<my-component on:childEvent="method('primitive', key, hash1=key1)"/>

If the element does not have a ViewModel, binds to domEvent on the element and calls method on the scope with the specified arguments.

<div on:domEvent="method('primitive', key, hash1=key1)"/>

You can also explicitly listen to events on the ViewModel using on:vm:childEvent or on the element using on:el:domEvent.

one-way to child

Updates childProp in <my-component>’s ViewModel with value in the scope:

<my-component childProp:from="value"/>

This can be read as "set childProp from value".

If the element does not have a ViewModel, updates the child-attr attribute or property of the element with value in the scope:

<div child-attr:from="value"/>

You can also explicitly use the ViewModel using vm:childProp:from="value" or the element using el:child-attr:from="value".

Note: If value being passed to the component is an object, changes to the objects properties will still be visible to the component. Objects are passed by reference. See One Way Binding With Objects.

one-way to parent

Updates value in the scope with childProp in <my-component>’s ViewModel:

<my-component childProp:to="value"/>

This can be read as "send childProp to value".

If the element does not have a ViewModel, updates value in the scope with the child-attr attribute or property of the element.

<div child-attr:to="value"/>

You can also explicitly use the ViewModel using vm:childProp:to="value" or the element using el:child-attr:to="value".

Note: If value being passed to the component is an object, changes to the objects properties will still be visible to the component. Objects are passed by reference. See One Way Binding With Objects.

two-way

Updates childProp in <my-component>’s ViewModel with value in the scope and vice versa:

<my-component childProp:bind="value"/>

Updates the child-attr attribute or property of the element with value in the scope and vice versa:

<div child-attr:bind="value"/>

You can also explicitly use the ViewModel using vm:childProp:bind="value" or the element using el:child-attr:bind="value".

One Way Binding With Objects

childProp:from="key" (one-way to child) or child-prop:to="key" (one-way to parent) is used to pass values from the current scope to a component or vice versa, respectively.

Generally, this binding only observes changes in one direction, but when key is an object (POJO, DefineMap, etc), it is passed as a reference, behaving in much the same way as the following snippet.

function component( bar ) {

    // changes to bar's properties are preserved
    bar.quux = "barfoo";

    // but replacing bar is not
    bar = {
        quux: "hello world"
    };
}

const foo = {
    quux: "foobar"
};
component( foo );