Use `can-bind` directly when not using `can-stache-bindings`

CanJS
1

I had a situation where I needed to bind a property between two observables (essentially two top level appStates) that did not have a .stache file associated to do the binding. I learned you can code what can-stache-bindings uses under the hood to wire up that parent-child binding relationship yourself. In my case, I was passing a traceMessage model between a viewer app (the child), where the messages were generated and added to a list, and an author app (the parent) where the list was displayed in a debug-panel. Because of this, the binding example below is from child to parent, the .stache equivalent of traceMessage:to="traceMessage"

The javascript file ‘in between them’ uses this code:

first your imports:

import Bind from 'can-bind'
import value from 'can-value'

the javascript code needed to set up the binding:
(this is the parent/author, rState is the child/viewer)

    const binding = new Bind({
      parent: value.to(this, 'traceMessage'),
      child: value.from(rState, 'traceMessage')
    })

    binding.start()

a good memory tool for what to use for value for the direction is you read from and write to, in the example above i want to read from the child and write to the parent

finally, in your teardown function, for memory safe goodness:

binding.stop()

see the docs here for more details: https://canjs.com/doc/can-bind.html

2 Likes