can-stache-bindings

can-stache-bindings

Default binding syntaxes for can-stache.

• {(child-prop)}="key"
• {($child-prop)}="key"
• {child-prop}="key"
• {$child-prop}="key"
• {^child-prop}="key"
• {^$child-prop}="key"
• ($DOM_EVENT)='CALL_EXPRESSION'
• (VIEW_MODEL_EVENT)='CALL_EXPRESSION'
• *ref-prop

API

{(child-prop)}="key"

Two-way binds childProp in the [can-component::viewModel viewModel] to [can-stache.key] in the parent [can-view-scope scope]. If childProp is updated key will be updated and vice-versa.

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

When setting up the binding:

• If childProp is undefined, key will be set to childProp.
• If key is undefined, childProp will be set to key.
• If both childProp and key are defined, key will be set to childProp.

1. child-prop {String}: The name of the property of the viewModel to two-way bind.

2. key {String}: The name of the property to two-way bind in the parent scope.

{($child-prop)}="key"

Two-way binds the element's childProp property or attribute to [can-stache.key] in the parent [can-view-scope scope]. If childProp is updated key will be updated and vice-versa.

<input {($value)}="name"/>

1. child-prop {String}: The name of the element's property or attribute to two-way bind.

2. key {String}: The name of the property to two-way bind in the parent scope.

{child-prop}="key"

Imports [can-stache.key] in the [can-view-scope scope] to childProp in [can-component::viewModel viewModel]. It also updates childProp with the value of key when key changes.

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

1. child-prop {String}: The name of the property to set in the component's viewmodel.

2. key {can-stache.expressions}: A KeyLookup or Call expression whose value is used to set as childProp.

{$child-prop}="key"

Imports [can-stache.key] in the [can-view-scope scope] to childProp property or attribute on the element.

<input {$value}="name"/>

This signature works, but the following should be used instead:

<input value="{{name}}"/>

{^child-prop}="key"

Exports childProp in the [can-component::viewModel viewModel] to [can-stache.key] in the parent [can-view-scope scope]. It also updates key with the value of childProp when childProp changes.

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

1. child-prop {String}: The name of the property to export from the child components viewmodel. Use {^this} or {^.} to export the entire viewModel.

2. key {String}: The name of the property to set in the parent scope.

{^$child-prop}="key"

Exports the element's childProp property or attribute to [can-stache.key] in the parent [can-view-scope scope]. It also updates key with the value of childProp when childProp changes.

<input {^$value}="name"/>

1. child-prop {String}: The name of the element's property or attribute to export.

2. key {String}: The name of the property to set in the parent scope.

($DOM_EVENT)='CALL_EXPRESSION'

Specify a callback function to be called on a particular DOM event.

<div ($click)="doSomething()"/>

1. DOM_EVENT {String}: A DOM event name like "click". jQuery custom events can also be given.

2. CALL_EXPRESSION {can-stache.expressions}: A call expression like method(key) that is called when the DOM_EVENT is fired. The following key values are also supported:

   • %element - The element the event happened upon.
   • $element - The [can.$] wrapped element the event happened upon.
   • %event - The event object.
   • %viewModel - If the element is a [can.Component], the component's [can.Component::viewModel viewModel].
   • %context - The current context.
   • %scope - The current [can.view.Scope].

(VIEW_MODEL_EVENT)='CALL_EXPRESSION'

Specify a callback function to be called on a particular [can-component::viewModel viewModel] event.

<my-component (show)="doSomething()"/>

1. DOM_EVENT {String}: A DOM event name like "click". jQuery custom events can also be given.

2. CALL_EXPRESSION {can-stache.expressions}: A call expression like method(key) that is called when the DOM_EVENT is fired. The following key values are also supported:

   • %element - The element the event happened upon.

   • $element - The [can.$] wrapped element the event happened upon.

   • %event - The event object.

   • %viewModel - If the element is a [can-component], the component's [can-component::viewModel viewModel].

   • %context - The current context.

   • %scope - The current [can-view-scope].

*ref-prop

A shorthand for exporting an element's viewModel to the reference scope.

1. ref-prop {String}: The name of the property to set in the template's 'references' scope.

Contributing

Making a Build

To make a build of the distributables into dist/ in the cloned repository run

npm install
node build

Running the tests

Tests can run in the browser by opening a webserver and visiting the test.html page. Automated tests that run the tests from the command line in Firefox can be run with

npm test