Ember Starter Kit

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.js"></script>
<script src="http://builds.emberjs.com/tags/v1.5.0/ember.js"></script>
<script src="http://builds.emberjs.com/tags/v1.0.0-beta.7/ember-data.js"></script>
<script type="text/x-handlebars">
    <h2>Welcome to Ember.js</h2>

    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="index">
      {{#link-to 'catalogs'}} click {{/link-to}}
  </script>

  <script type="text/x-handlebars" data-template-name="catalogs">
    {{#each}}
        Catalog year: {{year}}
        <br>
        {{#each catalogCourse in catalogCourses}}
          catalogCourse.id
        {{else}}
          Not loading the hasMany fixtures!
        {{/each}}
    {{/each}}
  </script>

CSS

/* Put your CSS here */
 html, body {
    margin: 20px;
}

JavaScript

App = Ember.Application.create();

App.ApplicationAdapter = DS.FixtureAdapter.extend({});

App.Router.map(function () {
    this.resource('catalogs');
});

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

App.Catalog = DS.Model.extend({
  year: DS.attr('string'),
  catalogCourses: DS.hasMany('catalog_course')
});

App.Catalog.FIXTURES = [
  {
    id: 1,
    year: '2014',
    catalog_courses: [ 1 ]
  }
];

App.CatalogCourse = DS.Model.extend({
  catalog: DS.belongsTo('catalog')
});

App.CatalogCourse.FIXTURES = [
  {
    id: 1,
    catalog: 1
  }
];