Skip to content

Figure out how to handle binding between can-components #6

@phillipskevin

Description

@phillipskevin

By default, if you pass the data object to a can-component it will two-way bind the current view and the component:

const appView = data => {
  return h('div', {}, [
    h('h2', {}, [ 'Children' ]),
    h('a-counter', data)
  ]);
};

You can also manually create a child scope to pass to the component in order to get one-way binding:

const appView = data => {
  const ChildScope = DefineMap.extend({
    // one way (to-parent) bind count
    set count(val) {
      data.count = val;
      return val;
    }
  });

  return h('div', {}, [
    h('h2', {}, [ 'Children' ]),
    h('a-counter', new ChildScope())
  ]);
};

This is pretty cumbersome to do whenever you don't want two-way binding, so a better solution is probably out there.

Maybe something like

deriveScope(data, {
  twoWay: [],
  toParent: [ ' count' ],
  toChild: []
};

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions