New Twiddle

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Eric OPs Ember Twiddle'
});

router.js

import Ember from 'ember';
var Router = Ember.Router.extend({
  location: 'none'
});

Router.map(function() {
});

export default Router;

routes.index.js

export default Ember.Route.extend({
  model: function() {
    return [this.get('one'), 
            this.get('blue'),
            this.get('notIt'),
            this.get('nully'),
            this.get('notIt2')];
  },
  one: 1,
  blue: 'blue',
  truth: true,
  notIt: Ember.computed.not('truth'),
  nully: null,
  notIt2: Ember.computed.not('undef'),
  undef: undefined,
});

styles.app.css

body { 
  margin: 12px 16px;
  background: #faf4f1;
}
h1 {
  font-family: 'Pacifico', cursive;
  color: white;
  text-shadow: 1px 1px 1px #000;
  background: url('https://static.jsbin.com/custom/emberjs/navigation_background.png') repeat-x;
  border-bottom: 1px solid #AA412F;
  box-shadow: 1px 1px 1px #000;
  background-size:cover;
  border-radius: 4px;
  
}
li {
    background-image: linear-gradient(-90deg, #f4d2c1, #e7624b);
    border: 1px solid #faf4f1;
    border-radius: 4px;
    padding: 5px;
}

templates.application.hbs

<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<h1>Welcome to {{appName}}</h1><br>
{{outlet}}
<br>

templates.index.hbs

<b class="foo">Index Route</b>
    <ul>
    {{#each model as |item|}}
      <li>{{item}}</li>
    {{/each}}
    </ul>