New Twiddle

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  init(...args) {
  	this._super(...args);
    
    this.set('myHugeArray', []);
  },
  
  cpArray: Ember.computed('myHugeArray.[]', function () {
  	return this.get('myHugeArray').slice(0, 10);
  }),
  
  actions: {
  	populate() {
    	 for (let i = 0; i < 10000; i++) {
        	this.get('myHugeArray').pushObject(i);
       }
    }
  }
});

helpers.lt.js

import Ember from 'ember';

export function lt([x, y]/*, hash*/) {
  return x < y;
}

export default Ember.Helper.helper(lt);

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
<button onclick={{action 'populate'}}>populate the array</button>
{{#each cpArray as |i|}}
	<p>{{i}}</p>
{{/each}}

{{!-- {{#each myHugeArray as |i|}}
	{{#if (lt i 10)}}
  	<p>{{i}}</p>
  {{/if}}
{{/each}} --}}

<br>
<br>

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"
  }
}