Commit 5b338409

mo khan <mo@mokhan.ca>
2014-06-29 15:03:12
use backbone to display an individual photo.
1 parent ea7d541
Changed files (10)
app/assets/javascripts/backbone/models/photo.js.coffee
@@ -13,6 +13,11 @@ class CakeSide.Models.Photo extends Backbone.Model
     created_at: null
     updated_at: null
 
+  initialize: (options) ->
+    @set('cake_id', options.cake_id)
+    @url="/api/v1/cakes/#{options.cake_id}/photos/#{options.id}"
+    super(options)
+
 class CakeSide.Collections.PhotosCollection extends Backbone.Collection
   model: CakeSide.Models.Photo
 
app/assets/javascripts/backbone/routers/cakes_router.js.coffee
@@ -4,6 +4,7 @@ class CakeSide.Routers.CakesRouter extends Backbone.Router
     "index"    : "index"
     ":id/edit" : "edit"
     ":id"      : "show"
+    "cakes/:id": "show"
     ".*"       : "index"
 
   index: ->
app/assets/javascripts/backbone/routers/photos_router.js.coffee
@@ -7,23 +7,23 @@ class CakeSide.Routers.PhotosRouter extends Backbone.Router
     "cakes/:cake_id/photos/.*"        : "index"
 
   newPhoto: (cake_id) ->
-    @photos = new CakeSide.Collections.PhotosCollection(cake_id: cake_id)
+    @photos = CakeSide.Application.request('PhotosRepository', cake_id)
     @view = new CakeSide.Views.Photos.NewView(collection: @photos)
     $("#backbone-content").html(@view.render().el)
 
   index: (cake_id) ->
-    @photos = new CakeSide.Collections.PhotosCollection(cake_id: cake_id)
+    @photos = CakeSide.Application.request('PhotosRepository', cake_id)
     @view = new CakeSide.Views.Photos.IndexView(photos: @photos)
     $("#backbone-content").html(@view.render().el)
 
   show: (cake_id, id) ->
-    photo = @photos.get(id)
-
-    @view = new CakeSide.Views.Photos.ShowView(model: photo)
+    @photos = CakeSide.Application.request('PhotosRepository', cake_id)
+    photo = new CakeSide.Models.Photo({cake_id: cake_id, id: id})
+    photo.fetch()
+    @view = new CakeSide.Views.Photos.ShowView(model: photo, collection: @photos)
     $("#backbone-content").html(@view.render().el)
 
   edit: (cake_id, id) ->
-    photo = @photos.get(id)
-
-    @view = new CakeSide.Views.Photos.EditView(model: photo)
+    @photos = CakeSide.Application.request('PhotosRepository', cake_id)
+    @view = new CakeSide.Views.Photos.EditView(model: @photos.get(id))
     $("#backbone-content").html(@view.render().el)
app/assets/javascripts/backbone/templates/cakes/thumbnail.jst.ejs
@@ -1,5 +1,5 @@
 <li class="span2">
-<a href="<%= Routes.creation_photo_path(cake_id || 0, id || 0) %>">
+<a href="#/cakes/<%= cake_id %>/photos/<%= id %>">
   <img src="<%= thumb_url %>" class="thumbnail" />
 </a>
 </li>
app/assets/javascripts/backbone/templates/photos/show.jst.ejs
@@ -1,12 +1,8 @@
-<p>
-  <b>Thumb url:</b>
-  <%= thumb_url %>
-</p>
-
-<p>
-  <b>Large url:</b>
-  <%= large_url %>
-</p>
-
-
-<a href="#/index">Back</a>
\ No newline at end of file
+<div class="row">
+  <div class="span12">
+    <p><a href="#/cakes/<%= cake_id %>">back</a></p>
+    <a href="#/cakes/<%= cake_id %>/photos/<%= id %>">
+      <img src="<%= original_url %>" class="thumbnail" />
+    </a>
+  </div>
+</div>
app/assets/javascripts/backbone/views/photos/show_view.js.coffee
@@ -1,8 +1,6 @@
 CakeSide.Views.Photos ||= {}
 
-class CakeSide.Views.Photos.ShowView extends Backbone.View
+class CakeSide.Views.Photos.ShowView extends Marionette.ItemView
   template: JST["backbone/templates/photos/show"]
-
-  render: ->
-    $(@el).html(@template(@model.toJSON() ))
-    return this
+  modelEvents:
+    'sync': 'render'
app/assets/javascripts/backbone/cakeside.js.coffee
@@ -38,7 +38,8 @@ window.CakeSide =
       else
         photos = new CakeSide.Collections.PhotosCollection(cake_id: cake_id)
         @photos_cache[cake_id] = photos
-        photos.fetch(reset: true)
+        photos.fetch(reset: true).done ->
+          console.log('done fetching.')
         photos
 
     @cakes.fetch(reset: true).done ->
app/controllers/api/v1/photos_controller.rb
@@ -7,6 +7,10 @@ module Api
         respond_with(@photos = current_user.creations.find(params[:cake_id]).photos)
       end
 
+      def show
+        respond_with(@photo = current_user.creations.find(params[:cake_id]).photos.find(params[:id]))
+      end
+
       def create
         cake_id = params[:cake_id]
         UploadPhoto.new.run(cake_id, params)
app/views/api/v1/photos/show.json.jbuilder
@@ -0,0 +1,1 @@
+json.partial! 'photo', photo: @photo
config/routes.rb
@@ -47,7 +47,7 @@ Cake::Application.routes.draw do
   namespace :api, :defaults => { :format => 'json' }  do
     namespace :v1 do
       resources :cakes, only: [:index, :show, :create, :update] do
-        resources :photos, only: [:index, :create]
+        resources :photos, only: [:index, :show, :create]
       end
       resources :categories, only: [:index]
       resources :logins, :only => [:create]