flight-with-child-components's Introduction

flight-with-child-components

A Flight mixin for nesting components by coupling their life-cycles, making sure that a component and its children are torn down together.

A component that intends to initialize child components should mix in withChildComponents and attach the children using this.attachChild.

The child will be passed an even to listen out for – when it's triggered, the child will teardown. withChildComponents mixin adds a unique event name to the parent (this.childTeardownEvent) for this use, but you can manually specify a teardownOn event name in the child's attrs.

This construct supports trees of components because, if the child also mixes in withChildComponents, it's childTeardownEvent will be fired before it is torn down, and that will teardown any further children in a cascade.

Installation

bower install --save flight-with-child-components

Example

In the parent component, mixin withChildComponents into the parent.

var withChildComponents = require('path/to/the/mixin');
var ChildComponent = require('some/child');
var AnotherChildComponent = require('some/other/child');

return defineComponent(parentComponent, withChildComponents);

function parentComponent() {

  this.after('initialize', function () {
    // this.attachChild does all the work needed to support nesting
    this.attachChild(ChildComponent, this.select('someChild'));

    // it supports the same API as 'attachTo'
    this.attachChild(AnotherChildComponent, '.another-child', {
      teardownOn: 'someEvent'
    });
  });

}

Development

Install the Node.js and client-side dependencies by running the following commands in the repo's root directory.

npm install

To continuously run the tests in Chrome during development, just run:

npm run watch-test

Contributing to this project

Anyone and everyone is welcome to contribute. Please take a moment to review the guidelines for contributing.

Recommend Projects

mikemliu / flight-with-child-components Goto Github PK