New Twiddle

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Ember Twiddle',
  
  stuff: [
    [ 'this', 'is', 'a', 'list' ],
    [],
    [ 'another', 'static', 'list' ]
  ],
  
  stuff2: null,
  
  init: function() {
    generateStuff(this.get('stuff'));
    this.set('stuff2', generateStuff2());
    this.notifyPropertyChange('stuff');
  },
  
  actions: {
    newStuff: function() {
      generateStuff(this.get('stuff'));
      this.set('stuff2', generateStuff2());
      this.notifyPropertyChange('stuff');
    }
  }
});

function generateStuff(list) {
  var a = [];
  for (var i = 0; i < 5; i++) {
    a.push(Math.random()*30);
  }
  list.splice(1, 1, a);
}

function generateStuff2() {
  var a = [];
  for (var i = 0; i < 5; i++) {
    a.push(Math.random()*30);
  }
  return [
    'this is a list'.w(),
    a,
    'another static list'.w()
   ];
}

application.template.hbs

<style>
  .icon { width:15px; height:15px; fill:blue; overflow:visible }
 </style>
<h1>Welcome to {{appName}}</h1>
<button {{action "newStuff"}}>New Stuff</button>
{{#each stuff as |list index|}}
  The List At {{index}}!
  <ul>
  {{#each list as |item|}}
    <li>
      <svg class="icon"><use xlink:href="https://activate.getlytics.com/images/icons.svg#plus-2" /></svg>
      {{item}}
    </li>
  {{/each}}
  </ul>
{{/each}}

{{#each stuff2 as |list index|}}
  The List At {{index}}!
  <ul>
  {{#each list as |item|}}
    <li>
      {{item}}
    </li>
  {{/each}}
  </ul>
{{/each}}

twiddle.json

{
  "version": "0.5.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.2.0/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.2.0/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.2.0/ember-template-compiler.js"
  }
}