1.0.0 • Published 7 years ago
ember-each-of v1.0.0
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}}