Adds Append helper

README.md

@@ -78,6 +78,7 @@ For action helpers, this will mean better currying semantics:
   + [`join`](#join)
   + [`compact`](#compact)
   + [`contains`](#contains)
+  + [`append`](#append)
 * [Object](#object-helpers)
   + [`group-by`](#group-by)
 * [Math](#math-helpers)
@@ -331,6 +332,16 @@ Checks if a given value or sub-array is contained within an array.
 
 **[⬆️ back to top](#available-helpers)**
 
+#### `append`
+Appends the given arrays and/or values into a single flat array.
+
+```hbs
+{{#each (append catNames dogName) as |petName|}}
+  {{petName}}
+{{/each}}
+```
+
+**[⬆️ back to top](#available-helpers)**
 ---
 
 ### Object helpers

addon/helpers/append.js

@@ -0,0 +1,67 @@
+import Ember from 'ember';
+
+const {
+  A: emberArray,
+  Helper,
+  computed,
+  defineProperty,
+  get,
+  getProperties,
+  guidFor,
+  isArray,
+  isEmpty,
+  observer,
+  set
+} = Ember;
+
+const idForArray = (array) => `__array-${guidFor(array)}`;
+
+export function append(...dependentKeys) {
+  dependentKeys = dependentKeys || [];
+  let arrayKeys = dependentKeys.map((dependentKey) => {
+    return `${dependentKey}.[]`;
+  });
+  return computed(...arrayKeys, function() {
+    let array = dependentKeys.map((dependentKey) => {
+      let value = get(this, dependentKey);
+      return isArray(value) ? value.toArray() : [value];
+    });
+
+    return [].concat(...array);
+  });
+};
+
+export default Helper.extend({
+  compute([...arrays]) {
+    set(this, 'arrays', arrays);
+
+    return get(this, 'content');
+  },
+
+  valuesDidChange: observer('arrays.[]', function() {
+    let arrays = get(this, 'arrays');
+
+    let oldArrayKeys = get(this, 'arrayKeys') || [];
+    let newArrayKeys = arrays.map(idForArray);
+
+    let keysToRemove = oldArrayKeys.filter((key) => {
+      return newArrayKeys.indexOf(key) === -1;
+    });
+
+    keysToRemove.forEach((key) => set(this, key, null));
+    arrays.forEach((array) => set(this, idForArray(array), array));
+
+    set(this, 'arrayKeys', newArrayKeys);
+
+    if (isEmpty(arrays)) {
+      defineProperty(this, 'content', []);
+      return;
+    }
+
+    defineProperty(this, 'content', append(...newArrayKeys));
+  }),
+
+  contentDidChange: observer('content.[]', function() {
+    this.recompute();
+  })
+});

addon/index.js

@@ -17,3 +17,4 @@ export { default as JoinHelper } from './helpers/join';
 export { default as WHelper } from './helpers/w';
 export { default as CompactHelper } from './helpers/compact';
 export { default as ContainsHelper } from './helpers/contains';
+export { default as AppendHelper } from './helpers/append';

app/helpers/append.js

@@ -0,0 +1 @@
+export { default, append } from 'ember-composable-helpers/helpers/append';

tests/integration/helpers/append-test.js

@@ -0,0 +1,54 @@
+import Ember from 'ember';
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+const { A: emberArray, run } = Ember;
+
+moduleForComponent('append', 'Integration | Helper | {{append}}', {
+  integration: true
+});
+
+test('It concats two arrays', function(assert) {
+  this.set('evens', emberArray([2, 4, 6]));
+  this.set('odds', emberArray([1, 3, 5]));
+
+  this.render(hbs`
+    {{~#each (append evens odds) as |n|~}}
+      {{n}}
+    {{~/each~}}
+  `);
+
+  let expected = '246135';
+
+  assert.equal(this.$().text().trim(), expected, 'appends values');
+});
+
+test('It concats two arrays and a value', function(assert) {
+  this.set('evens', emberArray([4, 6]));
+  this.set('odds', emberArray([1, 3, 5]));
+  this.set('prime', 2);
+
+  this.render(hbs`
+    {{~#each (append evens odds prime) as |n|~}}
+      {{n}}
+    {{~/each~}}
+  `);
+
+  let expected = '461352';
+
+  assert.equal(this.$().text().trim(), expected, 'appends values');
+});
+
+test('It watches for changes', function(assert) {
+  this.set('odds', emberArray([1, 3, 5]));
+  this.set('prime', 2);
+
+  this.render(hbs`
+    {{~#each (append odds prime) as |n|~}}
+      {{n}}
+    {{~/each~}}
+  `);
+
+  run(() => this.get('odds').pushObject(7));
+  assert.equal(this.$().text().trim(), '13572', 'new value is added');
+});