gistfile1.txt

// Router
this.resource('notes', function() {
  this.resource('notebook', { path: ':notebook_id' }, function() {
    this.resource('note', { path: ':note_id' });
  });
});

// models/note.js
import DS from 'ember-data';

var Note = DS.Model.extend({
  name: DS.attr('string'),
  content: DS.attr('string'),
  notebook: DS.belongsTo('notebook')
});

Note.reopenClass({
  FIXTURES: [
    {
      id: 1,
      name: 'First note',
      content: 'hello',
      notebook: 1
    },
    {
      id: 2,
      name: 'Second note',
      content: 'hello',
      notebook: 2
    }
  ]
});

export default Note;

// models/notebook.js
import DS from 'ember-data';

var Notebook = DS.Model.extend({
  name: DS.attr('string'),
  notes: DS.hasMany('note')
});

Notebook.reopenClass({
  FIXTURES: [
    {
      id: 1,
      name: 'First notebook'
    },
    {
      id: 2,
      name: 'Second notebook'
    }
  ]
});

export default Notebook;

gistfile2.js

// routes/notebook.js
// displays notes for a notebook
import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
    return this.store.find('note');
  }
});


// routes/notes.js
// overview of all notebooks
import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
    return this.store.findAll('notebook');
  }
});

gistfile3.hbs

// templates/notes.hbs
<div class="ui grid">
  <div class="four wide column">
    <div class="ui secondary vertical pointing menu" style="width: 100%;">
      <div class="header item">Recent Notes</div>

      <div class="ui divider"></div>
      <div class="header item">Notebooks</div>
      {{#each model as |item|}}
        {{#link-to 'notebook' item.id class='item'}}{{item.name}}{{/link-to}}
      {{/each}}

      <div class="item">
        <div class="ui icon input">
          <i class="folder icon"></i>
          {{input type='text' value=notebookName placeholder='New notebook' enter='newNotebook'}}
        </div>
      </div>
    </div>
    
  </div>
  {{outlet}}
</div>

// templates/notebook.hbs
<div class="four wide column">

  <div class="ui vertical secondary menu" style="width: 100%;">
    {{#each model as |item|}}
      {{#link-to 'note' item.id class='item'}}
        <h4 class="ui header">{{item.name}}</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      {{/link-to}}
    {{/each}}
  </div>

</div>
<div class="eight wide column">
  {{outlet}}
</div>

// templates/note.hbs
empty