Ember - Ember Addons

I. Introduction to Ember Addons

1. jQuery

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, and animation much simpler with an easy-to-use API that works across a multitude of browsers.

2. Backburner

A rewrite of the Ember.js run loop as a generic microlibrary.

How does backburner.js work on Backbone and Ember? READ MORE .

Ember uses the run loop: The run loop will run from the sync queue, which has higher priority than the render or destroy queue:

The sync queue contains binding synchronization jobs.
The actions queue is the general work queue and will typically contain scheduled tasks, e.g., promises.
The routerTransitions queue contains transition jobs in the router.
The render queue contains jobs meant for rendering; these will typically update the DOM.
The afterRender contains jobs meant to be run after all previously scheduled render tasks are complete. This is often good for 3rd-party DOM manipulation libraries that should only be run after an entire tree of DOM has been updated.
The destroy queue contains jobs to finish the teardown of objects other jobs have scheduled to destroy.

Interactive visualization of the run loop:

https://guides.emberjs.com/v1.10.0/understanding-ember/run-loop/#toc_an-example-of-the-internals

Example:

Ember.run.scheduleOnce('afterRender', this, () => {
  $('.data-source-list').find('.data-source-drag-drop').draggable({
    revert: 'invalid',
    containment: '#ember_app',
    cursor: 'move',
    helper: function () {
      return $('<div class="data-source-drag-helper">').appendTo('body').get(0);
    }
  });
});

3. RSVP

A lightweight library that provides tools for organizing asynchronous code. We’ll talk more about this in the next article.

reply.save().then(() => {
  this.decrementProperty('savingComment');
}).catch(() => {
  reply.deleteRecord();
}).finally(() => {
  this.scrollToEndCommentList();
});

II. Other Ember Addons

1. ember-ajax

Service for making AJAX requests in Ember 1.13+ applications.

Customizable service
Returns RSVP promises
Improved error handling
Ability to specify request headers
Upgrade path from ic-ajax

import Ember from 'ember';

const { inject } = Ember;

export default Ember.Route.extend({
  ajax: inject.service(),

  model() {
    return this.get('ajax').request('/posts');
  }
});

2. ember-infinity

Simple, flexible infinite scrolling for Ember CLI Apps.

{{infinity-model model=controller.model}}

import Ember from 'ember';

const { Route } = Ember;

export default Route.extend({
  model() {
    return this.infinityModel('post', { perPage: 10, startingPage: 1 });
  }
});

3. ember-route-action-helper

Bubble closure actions in routes.

{{foo-bar clicked=(route-action "updateFoo" "Hello" "world")}}

// application/route.js
import Ember from 'ember';

const { Route, set } = Ember;

export default Route.extend({
  actions: {
    updateFoo(...args) {
      // handle action
      return 42;
    }
  }
});

4. ember-wormhole

This is my favorite Ember addon :D. This addon provides a component that allows for rendering a block to a DOM element somewhere else on the page.

For example, given the following DOM:

<body class="ember-application">
  <!-- Destination must be in the same element as your ember app -->
  <!-- otherwise events/bindings will not work -->
  <div id="destination">
  </div>
  <div class="ember-view">
    <!-- rest of your Ember app's DOM... -->
  </div>
</body>

{{#ember-wormhole to="destination"}}
  Hello world!
{{/ember-wormhole}}

Then “Hello world!” would be rendered inside the destination div.

Note: The replacement of this addon is in-element for Ember 3.20+.

I. Introduction to Ember Addons#