can
Version:
MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.
83 lines (49 loc) • 2.39 kB
Markdown
^to-parent}
can.view.bindings 2
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 [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"/>
```
{String} child-prop The name of the property to export from the
child components viewmodel. Use `{^this}` or `{^.}` to export the entire viewModel.
{String} key 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"/>
```
{String} child-prop The name of the element's property or attribute to export.
{String} key 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"/>
can/view/bindings/doc/to-parent.html
## 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 {^-panel}="@*addPanel">
```
And pass the method like:
```
<my-panel {add-panel}="@*addPanel" title="CanJS">CanJS Content</my-panel>
```
Check it out in this demo:
can/view/bindings/doc/to-parent-function.html
Notice that `@` is used to prevent reading the function.
can.view.bindings.toParent {