{^to-parent}

  • function
can.view.bindings.toParent  

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"/>

Parameters

  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 key in the parent scope. It also updates key with the value of childProp when childProp changes.

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

Parameters

  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.

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.