Ember Initial Values

components.my-component.js

import Ember from 'ember';

import withInitialValues from 'app/utils/with-initial-values';

// With the Safe code commented in,
// clicking on the list labeled "Instance 1" or "Instance 2"
// will only result in a change to the clicked list.
// 
// With the Unsafe code commented in, 
// clicking on the list labeled "Instance 1" or "Instance 2"
// will result in a change to both lists.
// 
// Either way, "Instance 3" has a unique array and will not be
// affected by changes to this default array.

export default Ember.Component.extend(
  withInitialValues({
    // Safe: 
    words: () => ['apple', 'banana', 'cherry']
  }), {
    
  // Unsafe:
  // words: ['apple', 'banana', 'cherry'],
    
  click() {
    this.get('words').addObject('dragonfruit');
  }
});

helpers.array.js

// Ported from ember-composable-helpers
import { helper } from '@ember/component/helper';
import { A as emberArray } from '@ember/array';

export function array(params = []) {
  // slice params to avoid mutating the provided params
  return emberArray(params.slice());
}

export default helper(array);

templates.application.hbs

<h2>Instance 1:</h2>
{{my-component}}

<h2>Instance 2:</h2>
{{my-component}}

<h2>Instance 3:</h2>
{{my-component words=(array "foo" "bar" "baz")}}

templates.components.my-component.hbs

{{#each words as |word|}}
  <div>
  	{{word}}
  </div>
{{/each}}

twiddle.json

{
  "version": "0.14.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "2.18.2",
    "ember-template-compiler": "2.18.2",
    "ember-testing": "2.18.2"
  },
  "addons": {
    "ember-data": "2.18.2"
  }
}

utils.with-initial-values.js

export default function withInitialValues(initialValues) {
  return Ember.Mixin.create({
    init() {
      this._super(...arguments);
      
      const attrNames = Object.keys(this.attrs);
      
      for (let prop in initialValues) {
        const hasAttr = this.hasOwnProperty ?
          this.hasOwnProperty(prop) :
          attrNames.indexOf(attribute) !== -1;
        
        if (!hasAttr) {
					this.set(prop, initialValues[prop]());
        }
      }
    }
  })
};