Ember-composability NPM

ember-composability

Composability-oriented tools for Ember.js apps

Composable components

The child-component-support and parent-component-support mixins can be used for parents and children that need aware ness and/or access to each other

For example, you may want to expressively declare some parent/child components like this

{{#my-parent}}
  {{my-child}}
  {{my-child}}
  {{my-child}}
{{/my-parent}}

Parent

app/components/my-parent.js

import Ember from 'ember';
import ParentComponentSupport from 'ember-composability/mixins/parent-component-support';
import layout from '../templates/components/my-parent';

export default Ember.Component.extend(ParentComponentSupport, {
  name: 'mike',
  layout
});

parents can have access to child properties, via the composableChildren property

app/components/my-parent.js

totalValue: computed('composableChildren.@each.value', {
  get() {
    return this.get('composableChildren').reduce(
      (acc, val) => (acc += val.get('value')),
      0
    );
  }
});

Child

app/components/my-child.js

import Ember from 'ember';
import ChildComponentSupport from 'ember-composability/mixins/child-component-support';
import MyParent from './my-parent';
import layout from '../templates/components/my-child';

export default Ember.Component.extend(ChildComponentSupport, {
  value: 3,
  layout,
  _parentComponentTypes: [MyParent]
});

children can have access to parent properties via the composableParent property

app/templates/components/my-child.hbs

  {{composableParent.name}}

By default, all children will be registered with their parent. If you'd like to customize which components are registered, override the shouldRegisterToParent method:

shouldRegisterToParent(parentComponent) {
  const registeredChildren = parentComponent.getComposableChildren();
  const existingChild = childComponents.findBy('headerName', this.get('headerName'));
  return Ember.isNone(existingChild);
}