Note: This syntax is deprecated and you should use the new syntax instead.

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.

The deprecated bindings are as follows:

• (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.

Note: DOM attribute names are case-insensitive, use hyphens (-) to in the attribute name to setup camelCase bindings.

The following are the deprecated bindings that can 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 (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 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"/>

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 {^child-prop}="value"/>

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

<my-component {^$child-attr}="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 {(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"/>

One Way Binding With Objects

{child-prop}="key" (one-way to child) or {^child-prop}="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'
    };
}

var foo = {
    quux: 'foobar'
};
component(foo);