New Twiddle

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Ember Twiddle',
 
  width: 5
});

models.stuff.js

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  things: DS.attr()
  
});

router.js

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

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

Router.map(function() {
  this.route('stuff', function(){});
});

export default Router;

stuff.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  otherArray: Ember.computed('model.things', function(){
	  return this.get('model.things');
	})
});

stuff.route.js

import Ember from 'ember';

export default Ember.Route.extend({
  model: function(){
    		return new Ember.RSVP.Promise(function (resolve) {
          
			Ember.run.later(function () {
				resolve({name: 'bob', things: [0, 1, 2]});
			}, 5000);
		});
  }
});

stuff.template.hbs

Things:
{{#each otherArray as |thing|}}
  {{thing}}!
{{/each}}

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.wide {background-color: orange;}

.loading-contaier {
  height: 100%;
  width: 50px;
  text-align: center;
}

.loading-container {
  background-color: white;
}

.loading {
  display: inline-block;
  width: 50px;
  height: 50px;
  position: relative;
  border: 4px solid orange;
  top: 50%;
  animation: loading 4s infinite ease;
}

.loading-inner {
  vertical-align: top;
  display: inline-block;
  width: 100%;
  background-color: orange;
  animation: loading-inner 4s infinite ease-in;
}

@keyframes loading {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(180deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(360deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes loading-inner {
  0% {
    height: 0%;
  }

  25% {
    height: 0%;
  }

  50% {
    height: 100%;
  }

  75% {
    height: 100%;
  }

  100% {
    height: 0%;
  }
}

templates.application.hbs

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

<div class='wide' style="width: {{width}}%">.</div>
<br>
<label>Width
{{input value=width onkeyup=(action (mut width))}}
</label>
<br>


{{#link-to 'stuff'}}Stuff{{/link-to}}<br>
{{#link-to 'application'}}Home{{/link-to}}

templates.loading.hbs

Things are loading....

<div class="loading-container">
  <span class="loading"><span class="loading-inner"></span></span>
</div>

twiddle.json

{
  "version": "0.4.6",
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.5/ember.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.5/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.5/ember-template-compiler.js"
  }
}