DoneJS StealJS jQuery++ FuncUnit DocumentJS
4.3.0
5.0.0 3.13.1 2.3.35
  • About
  • Guides
  • API Docs
  • Community
  • Contributing
  • Bitovi
    • Bitovi.com
    • Blog
    • Design
    • Development
    • Training
    • Open Source
    • About
    • Contact Us
  • About
  • Guides
  • API Docs
    • Observables
      • can-bind
      • can-compute
      • can-debug
      • can-define
      • can-define/list/list
      • can-define/map/map
      • can-define-backup
      • can-define-stream
      • can-define-stream-kefir
      • can-event-queue
      • can-kefir
      • can-list
      • can-map
      • can-map-define
      • can-observation
      • can-observation-recorder
      • can-observe
      • can-simple-map
      • can-simple-observable
      • can-stream
      • can-stream-kefir
      • can-value
    • Data Modeling
      • can-connect
      • can-connect-feathers
      • can-fixture
      • can-fixture-socket
      • can-ndjson-stream
      • can-set
    • Views
      • can-component
      • can-stache
      • can-stache-bindings
        • Syntaxes
          • on:event
          • toChild:raw
          • toChild:from
          • toParent:to
          • twoWay:bind
      • can-stache-converters
      • can-stache-route-helpers
      • can-view-autorender
      • can-view-callbacks
      • can-view-import
      • can-view-live
      • can-view-model
      • can-view-nodelist
      • can-view-parser
      • can-view-scope
      • can-view-target
      • react-view-model
      • react-view-model/component
      • steal-stache
    • Routing
      • can-deparam
      • can-param
      • can-route
      • can-route-hash
      • can-route-mock
      • can-route-pushstate
    • JS Utilities
      • can-assign
      • can-define-lazy-value
      • can-diff
      • can-globals
      • can-join-uris
      • can-key
      • can-key-tree
      • can-make-map
      • can-parse-uri
      • can-queues
      • can-string
      • can-string-to-any
      • can-util
      • can-zone
      • can-zone-storage
    • DOM Utilities
      • can-ajax
      • can-attribute-encoder
      • can-child-nodes
      • can-control
      • can-dom-data
      • can-dom-events
      • can-dom-mutate
      • can-event-dom-enter
      • can-event-dom-radiochange
      • can-fragment
    • Data Validation
      • can-define-validate-validatejs
      • can-validate
      • can-validate-interface
      • can-validate-legacy
      • can-validate-validatejs
    • Typed Data
      • can-cid
      • can-construct
      • can-construct-super
      • can-data-types
      • can-namespace
      • can-reflect
      • can-reflect-dependencies
      • can-reflect-promise
      • can-types
    • Polyfills
      • can-symbol
      • can-vdom
    • Core
    • Infrastructure
      • can-global
      • can-test-helpers
    • Ecosystem
    • Legacy
  • Community
  • Contributing
  • GitHub
  • Twitter
  • Chat
  • Forum
  • News
Bitovi

toParent:to

  • Edit on GitHub

One-way bind a value from the viewModel or element to the parent scope.

childProp:to="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 someProp:to="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

  1. childProp {String}:

    The name of the property to export from the child components viewmodel. Use this:to or .:to to export the entire viewModel.

  2. key {Literal Expression|KeyLookup Expression|Call Expression|Helper Expression}:

    An expression that will be used to set in the parent scope.

child-prop:to="key"

Exports the element’s child-prop property or attribute to key in the parent scope. It also updates key with the value of child-prop when child-prop changes.

<input value:to="name"/>

Parameters

  1. child-prop {String}:

    The name of the element’s property or attribute to export.

  2. key {Literal Expression|KeyLookup Expression|Call Expression|Helper Expression}:

    An expression whose resulting value with be used to set in the parent scope.

vm:childProp:to="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 vm:someProp:to="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 are the same as childProp:to="key"

el:child-prop:to="key"

Exports the element’s child-prop property or attribute to key in the parent scope. It also updates key with the value of child-prop when child-prop changes.

<input el:value:to="name"/>

Parameters are the same as child-prop:to="key"

on:VIEW_MODEL_OR_DOM_EVENT:value:to='SCOPE_VALUE'

If the element has a ViewModel, listens to an event on the ViewModel and binds the element’s value to the SCOPE_VALUE when that event occurs.

If the element does not have a ViewModel, listens to an event on the element and binds binds the element’s value to the SCOPE_VALUE when that event occurs.

<my-component on:show:value:to="myScopeProp"/>

Parameters

  1. VIEW_MODEL_OR_DOM_EVENT {String}:

    A viewModel or DOM event.

  2. SCOPE_VALUE {String}:

    A value in the current scope.

Use

Depending on whether the element has a ViewModel, :to bindings change between exporting viewModel properties or DOM properties.

Exporting ViewModel properties

childProp:to="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:to="scope.vars.editing"/>
<edit-plate plateName:bind="scope.vars.editing.licensePlate"/>

Exporting DOM properties

child-prop:to="key" can be used to export an attribute value into the scope. For example:

<input value:to="name"/>

Updates name in the scope when the <input> element’s value changes.

Exporting Functions

You can export a function to the parent references scope with a binding like:

<my-tabs addPanel:to="scope.vars.addPanel">

And pass the method like:

<my-panel addPanel:from="scope.vars.addPanel" title:from="'CanJS'">CanJS Content</my-panel>

Check it out in this demo:

CanJS is part of DoneJS. Created and maintained by the core DoneJS team and Bitovi. Currently 4.3.0.

On this page

Get help

  • Chat with us
  • File an issue
  • Ask questions
  • Read latest news