Minimalistic starting point for Ember.js

by marclundgren

HTML

<script src="http://builds.emberjs.com/tags/v1.10.0/ember-template-compiler.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.prod.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.0.0-beta.16.1/ember-data.min.js"></script>
<script type="text/x-handlebars">
    <h1>Hello</h1>
    {{#link-to 'things'}}
        things
    {{/link-to}}
    
    {{outlet}}
</script>

<script type="text/x-handlebars" id="things">
    <h3>Things</h3>
    
    <ul>
    {{#each thing in things}}
        <li> {{thing.name}} </li>   
    {{/each}}
    </ul>
    
</script>

CSS

body, li {
    margin: 1em
}

JavaScript

var App = Ember.Application.create({
    LOG_TRANSITIONS: true
});

App.Store = DS.Store.extend({});

App.ApplicationAdapter = DS.FixtureAdapter;

App.Router = Ember.Router.extend();

App.Router.map(function() {
  this.route('things');
});

App.ThingsRoute = Ember.Route.extend({
  model: function() {
    return this.store.find('thing');
  }
});

App.Thing = DS.Model.extend({
  name: DS.attr('string')
});

App.Thing.reopenClass({
  FIXTURES: [
    {
      name: 'coffee',
      id: 1
    }, {
      id: 2,
      name: 'phone'
    }
  ]
});


App.ThingsController = Ember.Controller.extend({
  things: Ember.computed.alias('model')
});