shouldergiant / ember-each-of

Ember.js {{#each-of}} helper for array destructuring

ember-each-of

This addon will give you Array destructuring-like support in {{#each}} blocks.

Installation

ember install ember-each-of

Overview

Sometimes you want to bundle an object with other properties to keep them together when passing an array:

// foo-component.js
import Component from '@ember/component';
import { computed } from '@ember/object';

export default Component.extend({
  myItems: computed('items.[]', function() {
    return this.get('items').map((item, i) => {
      return {
        item,
        isSelected: i === 0
      };
    });
  })
});

{{!-- foo-component.hbs --}}
{{#each myItems as |item|}}
  {{bar-component
    item=item.item
    isSelected=item.isSelected
  }}
{{/each}}

With this addon, you can eliminate the {{item.item}} unsightliness by going a different route using Array destructuring and {{#each-of}}:

// foo-component.js
import Component from '@ember/component';
import { computed } from '@ember/object';

export default Component.extend({
  myItems: computed('items.[]', function() {
    return this.get('items').map((item, i) => {
      return [
        item,
        i === 0
      ];
    });
  })
});

{{!-- foo-component.hbs --}}
{{#each-of myItems as |item isSelected|}}
  {{bar-component
    item=item
    isSelected=isSelected
  }}
{{/each-of}}