New Twiddle

application.controller.js

import Ember from 'ember';

const {A, computed, isEmpty} = Ember;


export default Ember.Controller.extend({
  appName:'Ember Twiddle',
  length: 1000,
  list: null,
  
  actions: {
    regenerate() {
      this.transitionToRoute('lists.show', 1);
    }
  }
});

application.template.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>

<button {{action "regenerate"}}>
	Start
</button>

{{outlet}}
<br>
<br>

lists.show.controller.js

import Ember from 'ember';

const {computed} = Ember;

export default Ember.Controller.extend({
  nextId: 2,
  lists: [],
  
  next: computed('lists.[]', 'model', function() {
    let lists = this.get('lists');
    let model = this.get('model');
    let index = lists.indexOf(model);
    
    if (index >= 0) {
      return lists.objectAt(index + 1) || parseInt(model.get('id')) + 1;
    }
    return 2;
  }),
  
  prev: computed('lists.[]', 'model', function() {
    let lists = this.get('lists');
    let model = this.get('model');
    
    let index = lists.indexOf(model);
  	
  	if (index > 0) {
  		return lists.objectAt(index -1) || parseInt(model.get('id')) - 1;
    }
  
    return 1;
  }),
  
  push(model) {
    let lists = this.get('lists');
   	
    lists.pushObject(model);
  }
  
});

lists.show.route.js

import Ember from 'ember';

export default Ember.Route.extend({
  model(params) {
    let list = this.store.createRecord('list',  {id: params.id});
    list.buildItems();
    
    return list;
  },
  
  setupController(ctlr, model) {
    ctlr.push(model);
    ctlr.set('model', model);
    ctlr.set('nextId', model.get('id') + 1);
  }
});

lists.show.template.hbs

<h2>My List</h2>
{{my-list list=model}}

{{#link-to 'lists.show' prev}}
	prev
{{/link-to}}

{{#link-to 'lists.show' next}}
	next
{{/link-to}}

models.item.js

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  cost: DS.attr('number'),
  list: DS.belongsTo('list')
});

models.list.js

import Ember from 'ember';
import DS from 'ember-data';

const {hasMany} = DS;
const {RSVP, computed, isEmpty} = Ember;

export default DS.Model.extend({
	
  items: hasMany('item'),
  
  itemsCost: computed('items.@each.cost', function() {
    var items = this.get('items');
    
    if (isEmpty(items)) {
      return 0;
    }

    return items.reduce(function(value, item) {
      value += item.get('cost') || 0;
      return value;
    }, 0);
  }),
  
  buildItems() {
    let store = this.store;
    let items = this.get('items');
    
    return new RSVP.Promise((resolve, reject) => {
      for(var i = 0; i < 1000;  i++) {      
        let item = store.createRecord('item', {
          name: 'name-' + Math.random().toString(),
          cost: Math.random()
        });

        items.pushObject(item);
      }
      resolve(items);
    });
  }
  
});

my-list.component.js

import Ember from 'ember';

const {computed} = Ember;

export default Ember.Component.extend({
  sort: ['cost:asc'],
  sorted: computed.alias('list.items', 'sort'),
  cost: computed.alias('list.itemsCost')
});

my-list.my-item.component.js

import Ember from 'ember';

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

my-list.my-item.template.hbs

{{item.name}} @ {{item.cost}}

my-list.template.hbs

<h2>
	{{cost}}
</h2>

<div style="height: 100px; overflow:auto;">
	{{#each sorted as |item|}}
		{{my-list/my-item item=item}}
	{{/each}}
</div>

<h2>
	{{cost}}
</h2>

router.js

import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.route('lists', function() {
    this.route('show', {path: ":id"});
  });
});

export default Router;

twiddle.json

{
  "version": "0.4.13",
  "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"
  }
}