Github
Twitter{^to-parent}
One-way bind a value in the current [can-component::viewModel viewModel] to the parent scope.
{^child-prop}="key"
Exports childProp in the [can-component::viewModel viewModel] to key in the parent scope. It also updates
key with the value of childProp when childProp changes.
<my-component {^some-prop}="value"/>
Parameters
- child-prop
{String}:The name of the property to export from the child components viewmodel. Use
{^this}or{^.}to export the entire viewModel. - key
{Literal Expression|KeyLookup Expression|Call Expression|Helper Expression}:An expression that will be used to set in the parent scope.
{^$child-prop}="key"
Exports the element's childProp property or attribute to key in the parent scope. It also updates
key with the value of childProp when childProp changes.
<input {^$value}="name"/>
Parameters
- child-prop
{String}:The name of the element's property or attribute to export.
- key
{Literal Expression|KeyLookup Expression|Call Expression|Helper Expression}:An expression whose resulting value with be used to set in the parent scope.
Use
The use of {^to-parent} bindings changes between exporting viewModel properties or DOM properties.
Exporting ViewModel properties
{^child-prop}="key" can be used to export single values or the complete view model from a
child component into the parent scope. Typically, the values are exported to the references scope.
In the following example, it connects the selected driver in <drivers-list> with an editable plateName in
<edit-plate>:
<drivers-list {^selected}="*editing"/>
<edit-plate {(plate-name)}="*editing.licensePlate"/>
Exporting DOM properties
{^$child-prop}="key" can be used to export an attribute value into the scope. For example:
<input {^$value}="name"/>
Updates name in the scope when the <input> element's value changes.
Exporting Functions
You can export a function to the parent scope with a binding like:
<my-tabs {^@add-panel}="@*addPanel">
And pass the method like:
<my-panel {add-panel}="@*addPanel" title="CanJS">CanJS Content</my-panel>
Check it out in this demo:
Notice that @ is used to prevent reading the function.