fruitmachine-ftdomdelegate

A ftdomdelegate FruitMachine helper.

Usage no npm install needed!

<script type="module">
  import fruitmachineFtdomdelegate from 'https://cdn.skypack.dev/fruitmachine-ftdomdelegate';
</script>

README

fruitmachine-ftdomdelegate Build Status

A ftdomdelegate FruitMachine helper.

This helper:

  • Instantiates the dom-delegate when a fruitmachine module is instantiated;
  • Binds that dom-delegate to the module's El when the fruitmachine module is setup;
  • Unbinds the dom-delegate instance from the El when the fruitmachine module fires its teardown event;
  • And destroys the dom-delegate when the fruitmachine module is destroyed.

Usage examples

var Apple = fruitmachine.define({
  name: 'apple',
  helpers: [require('fruitmachine-ftdomdelegate')],
  initialize: function() {
    this.onButtonClick = this.onButtonClick.bind(this);
  },
  setup: function() {
    this.delegate.on('click', 'button', this.onButtonClick);
  },
  onButtonClick: function() {
    this.fire('buttonclick');
  }
});

Note: as long as you properly destroy your fruitmachine modules after you're finished with them, you need not worry about detached DOM nodes because dom-delegate will ensure any event listeners added are removed when destroy is called on it.

Demonstration 'todo' app

There is a rework of the TODO example from the main fruitmachine project.

The modules that make use of the fruitmachine-ftdomdelegate helper are located here and here.

Installation

$ npm install fruitmachine-ftdomdelegate

Tests

$ npm install
$ npm test

Credits and collaboration

The lead developer of fruitmachine-ftdomdelegate is @matthew-andrews at FT Labs. All open source code released by FT Labs is licenced under the MIT licence. We welcome comments, feedback and suggestions. Please feel free to raise an issue or pull request.