Array Rendering

components.my-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  didInsertElement() {
    this._super(...arguments);
    this.set('timestamp', Date.now());
  }
});

controllers.application.js

import Ember from 'ember';

function randomIntFromInterval(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

export default Ember.Controller.extend({
  list: [],
  
  firstTen: Ember.computed('list.[]', function() {
    return this.get('list').slice(0, 10);
  }),
  
  actions: {
    pushElement() {
      const list = this.get('list');
      const length = list.get('length');
    	list.pushObject({ label: `Element #${length}` });
    },
    unshiftElement() {
      const list = this.get('list');
      const length = list.get('length');
    	list.unshiftObject({ label: `Element #${length}` });
    },
    insertRandomly() {
      const list = this.get('list');
      const length = list.get('length');
    	list.insertAt(randomIntFromInterval(0, length), { label: `Element #${length}` });
    }
  }
});

templates.application.hbs

<button onclick={{action "pushElement"}}>
	Push element #{{list.length}}
</button>

<button onclick={{action "unshiftElement"}}>
	Unshift element #{{list.length}}
</button>

<button onclick={{action "insertRandomly"}}>
	Insert randomly element #{{list.length}}
</button>

<hr>

{{#each firstTen as |item index|}}
  {{my-component item=item index=index}}
{{/each}}

<hr>

{{#each list as |item index|}}
  {{my-component item=item index=index}}
{{/each}}

templates.components.my-component.hbs

{{item.label}}: {{timestamp}}

twiddle.json

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