DoneJS StealJS jQuery++ FuncUnit DocumentJS
6.0.1
5.33.2 4.3.0 3.14.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
        • prototype
          • parentValue
          • start
          • startChild
          • startParent
          • stop
      • can-compute
      • can-debug
      • can-deep-observable
      • 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-compat
      • can-map-define
      • can-observable-array
      • can-observable-object
      • can-observation
      • can-observation-recorder
      • can-observe
      • can-simple-map
      • can-simple-observable
      • can-stream
      • can-stream-kefir
      • can-value
    • Views
      • can-attribute-observable
      • can-component
      • can-observable-bindings
      • can-stache
      • can-stache-bindings
      • can-stache-converters
      • can-stache-element
      • can-stache-route-helpers
      • can-view-autorender
      • can-view-callbacks
      • can-view-import
      • can-view-model
      • can-view-parser
      • can-view-scope
      • can-view-target
      • steal-stache
    • Data Modeling
      • can-connect
      • can-connect-feathers
      • can-connect-ndjson
      • can-connect-tag
      • can-define-realtime-rest-model
      • can-define-rest-model
      • can-fixture
      • can-fixture-socket
      • can-local-store
      • can-memory-store
      • can-ndjson-stream
      • can-query-logic
      • can-realtime-rest-model
      • can-rest-model
      • can-set-legacy
      • can-super-model
    • 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-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-type
      • 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

start

  • Edit on GitHub

Start listening to the child & parent observables and set their values depending on their current state and the options provided to the binding when initialized.

binding.start()

This method turns on both the child and parent observable listeners by calling startChild and startParent.

import Bind from "can-bind";
import DefineMap from "can-define/map/map";
import value from "can-value";

const childMap = new DefineMap({childProp: "child value"});
const parentMap = new DefineMap({parentProp: "parent value"});

// Create the binding
const binding = new Bind({
  child: value.bind(childMap, "childProp"),
  parent: value.bind(parentMap, "parentProp")
});

// Turn on the binding
binding.start();

Additionally, it tries to sync the values of the child and parent observables, depending on:

  1. Whether the child or parent is equal to undefined.
  2. The values of the onInitDoNotUpdateChild, onInitDoNotUpdateParent and onInitSetUndefinedParentIfChildIsDefined options.
  3. If it’s a one-way or two-way binding.

How initialization works

By default, the initialization works as diagrammed below (with onInitDoNotUpdateChild=false and onInitSetUndefinedParentIfChildIsDefined=true):

Child start value      Parent start value     Child end value  Parent end value  API call

child=1           <->  parent=2           =>  child=2          parent=2          _updateChild(2)
child=1           <->  parent=undefined   =>  child=1          parent=1          _updateParent(1)
child=undefined   <->  parent=2           =>  child=2          parent=2          _updateChild(2)
child=undefined   <->  parent=undefined   =>  child=undefined  parent=undefined  _updateChild(undefined)
child=3           <->  parent=3           =>  child=3          parent=3          _updateChild(3)

child=1            ->  parent=2           =>  child=1          parent=1          _updateParent(1)
child=1            ->  parent=undefined   =>  child=1          parent=1          _updateParent(1)
child=undefined    ->  parent=2           =>  child=undefined  parent=undefined  _updateParent(undefined)
child=undefined    ->  parent=undefined   =>  child=undefined  parent=undefined  _updateParent(undefined)
child=3            ->  parent=3           =>  child=3          parent=3          _updateParent(3)

child=1           <-   parent=2           =>  child=2          parent=2          _updateChild(2)
child=1           <-   parent=undefined   =>  child=undefined  parent=undefined  _updateChild(undefined)
child=undefined   <-   parent=2           =>  child=2          parent=2          _updateChild(2)
child=undefined   <-   parent=undefined   =>  child=undefined  parent=undefined  _updateChild(undefined)
child=3           <-   parent=3           =>  child=3          parent=3          _updateChild(3)

To summarize the diagram above: by default, one-way bindings initialize however the binding is set up. With one-way parent-to-child bindings, the parent always sets the child; likewise, one-way child-to-parent bindings always set the parent’s value to the child’s value. This is true even when one of them is undefined and/or if they’re already the same value.

With two-way bindings, the logic is a little different: if one of the observable values is undefined, it will be set to the value of the other observable. If the child & parent conflict, the child’s value will be set to match the parent.

The onInitDoNotUpdateChild option can change how initialization works. This option’s value is false by default, but if it’s set to true, then the child will never be set when the binding is initialized. This option does not effect one-way child-to-parent bindings because the child’s value is never set when that type of binding is initialized.

Below is the same diagram as above, except with the options onInitDoNotUpdateChild=true and onInitSetUndefinedParentIfChildIsDefined=true:

Δ Child start value     Parent start value     Child end value  Parent end value  API call

Δ child=1           <-> parent=2           =>  child=1          parent=2          None
  child=1           <-> parent=undefined   =>  child=1          parent=1          _updateParent(1)
Δ child=undefined   <-> parent=2           =>  child=undefined  parent=2          None
Δ child=undefined   <-> parent=undefined   =>  child=undefined  parent=undefined  None
Δ child=3           <-> parent=3           =>  child=3          parent=3          None

Δ child=1           <-  parent=2           =>  child=1          parent=2          None
Δ child=1           <-  parent=undefined   =>  child=1          parent=undefined  None
Δ child=undefined   <-  parent=2           =>  child=undefined  parent=2          None
Δ child=undefined   <-  parent=undefined   =>  child=undefined  parent=undefined  None
Δ child=3           <-  parent=3           =>  child=3          parent=3          None

The onInitDoNotUpdateParent option can change how initialization works. This option’s value is false by default, but if it’s set to true, then the parent will never be set when the binding is initialized. This option does not effect one-way parent-to-child bindings because the parent’s value is never set when that type of binding is initialized.

Below is a diagram that shows the change (Δ) from the default behaviour when onInitDoNotUpdateParent=true:

Δ   Child start value      Parent start value     Child end value  Parent end value  API call

    child=1           <->  parent=2           =>  child=2          parent=2          _updateChild(2)
Δ   child=1           <->  parent=undefined   =>  child=1          parent=undefined  None
    child=undefined   <->  parent=2           =>  child=2          parent=2          _updateChild(2)
    child=undefined   <->  parent=undefined   =>  child=undefined  parent=undefined  _updateChild(undefined)
    child=3           <->  parent=3           =>  child=3          parent=3          _updateChild(3)

Δ   child=1            ->  parent=2           =>  child=1          parent=2          None
Δ   child=1            ->  parent=undefined   =>  child=1          parent=undefined  None
Δ   child=undefined    ->  parent=2           =>  child=undefined  parent=undefined  None
Δ   child=undefined    ->  parent=undefined   =>  child=undefined  parent=undefined  None
Δ   child=3            ->  parent=3           =>  child=3          parent=3          None

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

On this page

Get help

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