Playing around with ember data relationships.

app/adapters/species.js

@@ -0,0 +1,5 @@
+import DS from 'ember-data';
+
+export default DS.RESTAdapter.reopen({
+  namespace: 'api'
+});

app/models/genus.js

@@ -6,7 +6,8 @@ inflector.irregular('genus', 'genera');
 
 export default DS.Model.extend({
   genusName: DS.attr(),
-  createdAt: DS.attr(),
-  updatedAt: DS.attr(),
-  deletedAt: DS.attr()
+  species: DS.hasMany('species', {async: true}),
+  createdAt: DS.attr('date'),
+  updatedAt: DS.attr('date'),
+  deletedAt: DS.attr('date')
 });

app/models/species.js

@@ -0,0 +1,10 @@
+import DS from 'ember-data';
+
+export default DS.Model.extend({
+  genusId: DS.attr(),
+  speciesName: DS.attr(),
+  genus: DS.belongsTo('genus', {async: true}),
+  createdAt: DS.attr('date'),
+  updatedAt: DS.attr('date'),
+  deletedAt: DS.attr('date')
+});

app/router.js

@@ -9,6 +9,7 @@ Router.map(function() {
   this.route('login');
   this.route('about');
   this.resource('genera');
+  this.resource('species');
 });
 
 export default Router;

app/routes/species.js

@@ -0,0 +1,7 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+  model: function() {
+    return this.store.find('species');
+  }
+});

app/templates/application.hbs

@@ -2,10 +2,13 @@
   <div class="flakes-navigation">
     <ul>
       {{#link-to 'genera' tagName='li' href=false}}
-      {{#link-to 'genera'}}Genera{{/link-to}}
+        {{#link-to 'genera'}}Genera{{/link-to}}
+      {{/link-to}}
+      {{#link-to 'species' tagName='li' href=false}}
+        {{#link-to 'species'}}Species{{/link-to}}
       {{/link-to}}
       {{#link-to 'about' tagName='li' href=false}}
-      {{#link-to 'about'}}About{{/link-to}}
+        {{#link-to 'about'}}About{{/link-to}}
       {{/link-to}}
     </ul>
 

app/templates/genera.hbs

@@ -1,7 +1,23 @@
-<h1>Genera</h1>
+<p class="flakes-message information">This is here for debugging, this page will be deleted.</p>
 
-<ul>
+<div class="grid-1">
   {{#each}}
-    <li>{{genusName}}</li>
+  <div class="span-1">
+    <fieldset class="read-only-information">
+      <legend>{{genusName}}</legend>
+      <dl>
+        <dt>Created</dt>
+        <dd>{{createdAt}}</dd>
+      </dl>
+      <dl>
+        <dt>Updated</dt>
+        <dd>{{updatedAt}}</dd>
+      </dl>
+      <dl>
+        <dt>Deleted</dt>
+        <dd>{{deletedAt}}</dd>
+      </dl>
+    </fieldset>
+  </div>
   {{/each}}
-</ul>
+</div>

app/templates/species.hbs

@@ -0,0 +1,29 @@
+<div class="grid-1">
+  {{#each}}
+  <div class="span-1">
+    <fieldset class="read-only-information">
+      <legend>{{speciesName}}</legend>
+      <dl>
+        <dt>Genus</dt>
+        <dd>{{genus.genusName}}</dd>
+      </dl>
+      <dl>
+        <dt>Species</dt>
+        <dd>{{speciesName}}</dd>
+      </dl>
+      <dl>
+        <dt>Created</dt>
+        <dd>{{createdAt}}</dd>
+      </dl>
+      <dl>
+        <dt>Updated</dt>
+        <dd>{{updatedAt}}</dd>
+      </dl>
+      <dl>
+        <dt>Deleted</dt>
+        <dd>{{deletedAt}}</dd>
+      </dl>
+    </fieldset>
+  </div>
+  {{/each}}
+</div>