Commit 8849f22

mo khan <mo@mokhan.ca>
2014-11-21 05:17:49
render photos and artist.
1 parent c3c6f40
app/models/cake.js
@@ -3,6 +3,10 @@ import DS from 'ember-data';
 export default DS.Model.extend({
   name: DS.attr('string'),
   description: DS.attr('string'),
+  author: DS.belongsTo('user', {async: true}),
+  photos: DS.hasMany('photo', {async: true}),
   createdAt: DS.attr('date'),
   updatedAt: DS.attr('date'),
+
+  primaryPhoto: Ember.computed.alias('photos.firstObject')
 });
app/models/photo.js
@@ -0,0 +1,7 @@
+import DS from 'ember-data';
+
+export default DS.Model.extend({
+  url: DS.attr('string'),
+  createdAt: DS.attr('date'),
+  updatedAt: DS.attr('date'),
+});
app/models/user.js
@@ -0,0 +1,7 @@
+import DS from 'ember-data';
+
+export default DS.Model.extend({
+  name: DS.attr('string'),
+  createdAt: DS.attr('date'),
+  updatedAt: DS.attr('date'),
+});
app/routes/cakes/index.js
@@ -2,6 +2,7 @@ import Ember from 'ember';
 import RouteMixin from 'ember-cli-pagination/remote/route-mixin';
 
 export default Ember.Route.extend(RouteMixin, {
+  perPage: 12,
   model: function(params) {
     return this.findPaged('cake', params);
   }
app/templates/cakes/index.hbs
@@ -1,16 +1,13 @@
-<ul>
+<div class="row">
   {{#each}}
-    <li>
-      {{#link-to 'cake' this}}
-        {{name}}
-        {{description}}
-      {{/link-to}}
-    </li>
-  {{else}}
-    <li>No cakes found.</li>
+  <div class="col-sm-6 col-md-4">
+    {{#link-to 'cake' this class='thumbnail'}}
+      <img {{bind-attr src=primaryPhoto.url}} {{bind-attr alt=name}}>
+    {{/link-to}}
+  </div>
   {{/each}}
-</ul>
-
-{{page-numbers content=content}}
-
-{{outlet}}
+  <div class="col-sm-12 col-md-12">
+    {{page-numbers content=content}}
+    {{outlet}}
+  </div>
+</div>
app/templates/application.hbs
@@ -1,9 +1,24 @@
-<h2 id='title'>Welcome to Ember.js</h2>
+<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+  <div class="container">
+    <div class="navbar-header">
+      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+        <span class="sr-only">Toggle navigation</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+      {{link-to 'Cakeside' 'index' class="navbar-brand"}}
+    </div>
+    <div class="navbar-collapse collapse">
+      <ul class="nav navbar-nav navbar-right">
+        <li>{{link-to 'Home' 'index'}}</li>
+        <li>{{link-to 'Cakes' 'cakes'}}</li>
+      </ul>
+    </div>
+  </div>
+</div>
 
-<ul>
-  <li>{{link-to 'Home' 'index'}}</li>
-  <li>{{link-to 'Cakes' 'cakes'}}</li>
-</ul>
-
-<hr />
-{{outlet}}
+<<br />
+<div class="container-fluid">
+  {{outlet}}
+</div>
app/templates/cake.hbs
@@ -1,7 +1,14 @@
-<h1>{{name}}</h1>
-<p>{{description}}</p>
-
-<p>Created at: {{formatted-date createdAt 'MMM Do, YYYY [at] h:mm'}}</p>
-<p>Updated at: {{formatted-date updatedAt 'MMM Do, YYYY [at] h:mm'}}</p>
+<div class="row">
+  <div class="col-sm-6 col-md-6">
+    <img {{bind-attr src=primaryPhoto.url}} {{bind-attr alt=name}} class="thumbnail">
+  </div>
+  <div class="col-sm-6 col-md-6">
+    <h1>{{#link-to 'cake' this}}{{name}}{{/link-to}}</h1>
+    <p>By {{author.name}}</p>
+    <p>{{description}}</p>
 
+    <p>Created at: {{formatted-date createdAt 'MMM Do, YYYY [at] h:mm'}}</p>
+    <p>Updated at: {{formatted-date updatedAt 'MMM Do, YYYY [at] h:mm'}}</p>
+  </div>
+</div>
 {{outlet}}
tests/unit/models/photo-test.js
@@ -0,0 +1,15 @@
+import {
+  moduleForModel,
+  test
+} from 'ember-qunit';
+
+moduleForModel('photo', 'Photo', {
+  // Specify the other units that are required for this test.
+  needs: []
+});
+
+test('it exists', function() {
+  var model = this.subject();
+  // var store = this.store();
+  ok(!!model);
+});
tests/unit/models/user-test.js
@@ -0,0 +1,15 @@
+import {
+  moduleForModel,
+  test
+} from 'ember-qunit';
+
+moduleForModel('user', 'User', {
+  // Specify the other units that are required for this test.
+  needs: []
+});
+
+test('it exists', function() {
+  var model = this.subject();
+  // var store = this.store();
+  ok(!!model);
+});