ember-composability

Ember.js composability tools & helpers

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
ember-composability
28161.0.14 years ago8 years agoMinified + gzip package size for ember-composability in KB

Readme

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

  • ember server
  • Visit your app at http://localhost:4200.

Running Tests

  • ember test
  • ember test --server

Building

  • ember build

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