ember-composability

1.0.1 • Public • Published

ember-composability

Build Status npm version

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);
}

Installation

  • git clone this repository
  • npm install
  • bower install

Running

Running Tests

  • ember test
  • ember test --server

Building

  • ember build

For more information on using ember-cli, visit http://www.ember-cli.com/.

Analytics

Package Sidebar

Install

npm i ember-composability

Weekly Downloads

4,767

Version

1.0.1

License

MIT

Unpacked Size

11.6 kB

Total Files

10

Last publish

Collaborators

  • mike-north-bot
  • northm