Array Copy

application.controller.js

import Ember from 'ember';

const { Controller, Object } = Ember;

const TestObject = Object.extend({
  property1: 'abc',
  property2: [1],
});

export default Controller.extend({
  appName:'Ember Twiddle',
	original: TestObject.create({}),
});

application.template.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{
	test-component
  myObject=original
}}
<br>
<br>

test-component.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  // PASSED IN
  myObject: null,
  
  propertiesList: ['property1', 'property2'],
  // Populated on init
  property1: null,
  property2: null,
  
	resetOnInit: Ember.on('init', function() {
  	this.get('propertiesList').forEach((field) => {
      const valueInObject = this.get('myObject').get(field);
      this.set(field, valueInObject);
    });
  }),
  
  actions: {
    modifyProperty2: function() {
      console.log(this.get('myObject.property2'), this.get('property2'));
    	this.get('property2').push(2);
      console.log(this.get('myObject.property2'), this.get('property2'));
    }
  }
});

test-component.template.hbs

<h2>Test Component</h2>
<ul>
	<li>{{myObject.property1}} | {{myObject.property2}}</li>
  <li>{{property1}} | {{property2}}</li>
</ul>

<button {{action 'modifyProperty2'}}>Modify Property2</button>

twiddle.json

{
  "version": "0.4.16",
  "EmberENV": {
    "FEATURES": {}
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.1.0/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.1.0/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.1.0/ember-template-compiler.js"
  }
}