ember-lifeline-decorators

This Ember addon gives you decorators for elegantly using ember-lifeline with ES6 classes.

Installation

Install as any other addon. You will also need ember-lifeline itself:

ember install ember-lifeline-decorators ember-lifeline

Usage

Available decorators

Decorator	ember-lifeline	Description
@later	runTask	Delay the execution of this method
@schedule	scheduleTask	Schedule this method on a run loop queue
@debounce	debounceTask	Debounce this method
@throttle	throttleTask	Throttle this method
@destructor	registerDisposable	Automatically execute this method during willDestroy
@eventListener	addEventListener	Execute this method when a DOM event is fired

@later

• timeout: number — delay in milliseconds

runTask / import { later } from '@ember/runloop';

Delays the execution of the decorator by timeout milliseconds.

import Component from '@ember/component';
import { later } from 'ember-lifeline-decorators';

export default class ExampleComponent extends Component {
  @later(500)
  function callMeMaybe() {
    // ...
  }

  // and then elsewhere
  hereIsMyNumber() {
    this.callMeMaybe();
  }
}

@schedule

• queue: RunLoopQueue — the queue to put the method in
  • sync
  • actions
  • routerTransitions
  • render
  • destroy

scheduleTask / import { schedule } from '@ember/runloop';

When the method is called, it is scheduled to be run in the specified run loop queue.

import Component from '@ember/component';
import { later } from 'ember-lifeline-decorators';

export default class ExampleComponent extends Component {
  @schedule('render')
  function callMeMaybe() {
    // ...
  }

  // and then elsewhere
  hereIsMyNumber() {
    this.callMeMaybe();
  }
}

@debounce

• wait: number — delay in milliseconds
• immediate = false: boolean — trigger the function on the leading instead of the trailing edge of the wait interval

debounceTask / import { debounce } from '@ember/runloop';

Delay calling the target method until the debounce period has elapsed with no additional debounce calls. If the method is called again before the specified time has elapsed, the timer is reset and the entire period must pass again before the target method is called.

import Component from '@ember/component';
import { debounce } from 'ember-lifeline-decorators';

export default class ExampleComponent extends Component {
  @debounce(500)
  function callMeMaybe() {
    // ...
  }

  // and then elsewhere
  hereIsMyNumber() {
    this.callMeMaybe();
  }
}

@throttle

• spacing: number — Number of milliseconds to space out executions
• immediate = true: boolean — trigger the function on the leading instead of the trailing edge of the wait interval

throttleTask / import { throttle } from '@ember/runloop';

Ensure that the target method is never called more frequently than the specified spacing period.

import Component from '@ember/component';
import { throttle } from 'ember-lifeline-decorators';

export default class ExampleComponent extends Component {
  @throttle(500)
  function callMeMaybe() {
    // ...
  }

  // and then elsewhere
  hereIsMyNumber() {
    this.callMeMaybe();
  }
}

@destructor

registerDisposable / import { registerDestructor } from '@ember/destroyable';

Calls this method during destruction of the object.

import { action } from '@ember/object';
import Component from '@glimemr/component';
import { destructor } from 'ember-lifeline-decorators';

export default class ExampleComponent extends Component {
  constructor(owner, args) {
    super(owner, args);

    window.addEventListener('resize', this.onResize);
  }

  @destructor
  unregister() {
    window.removeEventListener('resize', this.onResize);
  }

  @action
  onResize(event) {
    // ...
  }
}

@eventListener

• target:
  • EventTarget — target, such as window or HTMLElement, to register the listener on
  • (this: EmberObject, ctx: EmberObject) => EventTarget — a callback that is called with the context bound to and the first parameter as the object the decorator is used on
• eventName: string — the event to listen for
• options?: object — optional options to pass to addEventListener

addEventListener / EventTarget.addEventListener

⚠️👉 In almost all scenarios it is much more sensible to use ember-on-modifier or ember-on-helper.

Automatically calls this method whenever the given event is fired on target.

import Service from '@ember/service';
import { eventListener } from 'ember-lifeline-decorators';

export default class ScrollService extends Service {
  @eventListener(window, 'scroll', { passive: true })
  function onScroll(event) {
    // ...
  }
}

By passing a callback function as the first parameter, you can query the class instance the decorator is used on for information. For instance, you can access the element property of a Component:

import Component from '@ember/component';
import { eventListener } from 'ember-lifeline-decorators';

export default class ExampleComponent extends Component {
  @eventListener(t => t.element, 'scroll', { passive: true })
  function onScroll(event) {
    // ...
  }
}

If the @eventListener is used on a class that implements the didInsertElement hook, like the good ol' Ember Component or sparkles-component, the callback will be executed during the didInsertElement hook. For all other subclasses of EmberObject the callback will be executed during init.