Performance

components.my-component.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.my-each-list.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.my-ember-collection-list.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.my-item.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
  	click: function() {
    
    },
    
    doubleClick: function() {
    
    },
    
    mouseDown: function() {
    
    },
    
    nothing: function() {
    },
    
    simulate: function() {},
		duplicate: function() {},
		toggleEditingName: function() {},
		delete: function() {},
  }
});

components.my-list.js

import Ember from 'ember';

export default Ember.Component.extend({
  willRender: function() {
  	this.set('start', new Date().getTime());
  },
  didRender: function() {
  	console.log('list ' + (new Date().getTime() - this.get('start')) + 'ms');
  }
});

components.my-smoke-and-mirrors-list.js

import Ember from 'ember';

export default Ember.Component.extend({
});

controllers.application.js

import Ember from 'ember';
import FactoryGuy from 'ember-data-factory-guy';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  items: Ember.A(),
  
  generateData: Ember.on('init', function() {
  	FactoryGuy.define('my-model', {
      // Put default 'user' attributes in the default section
      default: {
        firstName: FactoryGuy.generate((num)=> `firstName #${num}`),
        lastName: FactoryGuy.generate((num)=> `lastName #${num}`),
        age: FactoryGuy.generate((num)=> num),
        city: FactoryGuy.generate((num)=> `City #${num}`),
      }
  	});
    
    for (var i = 0; i < 500; i++) {
      this.get('items').pushObject(FactoryGuy.make('my-model'));
    } 
  })
});

helpers.disable-bubbling.js

import Ember from 'ember';

export function disableBubbling([action]) {
	return function(event) {
		event.stopPropagation();

		return action(event);
	};
}

export default Ember.Helper.helper(disableBubbling);

models.my-model.js

import Model from "ember-data/model";
import attr from "ember-data/attr";
import { belongsTo, hasMany } from "ember-data/relationships";

export default Model.extend({
  firstName: attr('string'),
  lastName: attr('string'),
  age: attr('number'),
  city: attr('string'),
  
  fullName: Ember.computed('firstName', 'lastName', function() {
  	return this.get('firstName') + ' ' + this.get('lastName');
  }),
  
  quickActions: Ember.computed(function() {
  	return [
			Ember.Object.extend({
				label: 'edit',
				link: Ember.computed('city', function() {
					return 'http://example.com/' + this.get('city');
				}.bind(this))
			}).create(),
			{
				label: 'view',
				action: "simulate"
			},
			{
				label: 'duplicate',
				action: "duplicate"
			},
			{
				label: 'rename',
				action: "toggleEditingName"
			},
			{
				label: 'delete',
				action: "delete"
			}
		];
  })
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{my-list items=items}}
<br>
<br>

templates.components.my-component.hbs

<div>
	<p>{{value}}</p>
</div>

templates.components.my-each-list.hbs

{{yield}}

templates.components.my-ember-collection-list.hbs

{{yield}}

templates.components.my-item.hbs

	<tr onclick={{action 'click'}} ondblclick={{action 'doubleClick'}} onmousedown={{action 'mouseDown'}}>
		<td>{{my-component value=item.firstName}}</td>
		<td>{{my-component value=item.lastName}}</td>
		<td>{{my-component value=item.fullName}}</td>
		<td>{{my-component value=item.age}}</td>
		<td>{{my-component value=item.city}}</td>
    <td>
			<ol onmouseup={{disable-bubbling (action 'nothing')}} ondblclick={{disable-bubbling (action 'nothing')}}>
			  {{#each item.quickActions as |quickAction|}}
			    {{#unless quickAction.isHidden}}
			      {{#if if quickAction.action}}
			        <li><a class="{{if quickAction.highlighted "is-highlighted"}} {{if quickAction.disabled "is-disabled"}}" onclick={{unless quickAction.disabled (disable-bubbling (action quickAction.action))}}>{{quickAction.label}}</a></li>
			      {{else if (and (eq item.persisted false) quickAction.link)}}
			        <li><a class="{{if quickAction.highlighted "is-highlighted"}} {{if quickAction.disabled "is-disabled"}}" onclick={{action 'goToWhenPersisted' quickAction.link}}>{{quickAction.label}}</a></li>
			      {{else if quickAction.link}}
			        <li><a class="{{if quickAction.highlighted "is-highlighted"}} {{if quickAction.disabled "is-disabled"}}" href={{quickAction.link}}>{{quickAction.label}}</a></li>
			      {{else if quickAction}}
			        <li><a class="{{if quickAction.highlighted "is-highlighted"}} {{if quickAction.disabled "is-disabled"}}">{{quickAction.label}}</a></li>
			      {{/if}}
			    {{/unless}}
			  {{/each}}
			</ol>
    </td>
  </tr>

templates.components.my-list.hbs

<table>
{{#ember-collection
  items=items
  cell-layout=(fixed-grid-layout '100%' 100) as |item index|
}}
	{{my-item item=item}}
{{/ember-collection}}
</table>

templates.components.my-smoke-and-mirrors-list.hbs

{{yield}}

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",
    "ember-data-factory-guy": "*",
    "ember-truth-helpers": "*",
    "ember-collection": "*"
  }
}