{^to-parent}

One-way bind a value in the current viewModel to the parent scope.

`{^child-prop}="key"`

Exports childProp in the ViewModel to key in the parent scope. It also updates key with the value of childProp when childProp changes.

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

Note: If key 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.

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.