Commit ca17c8dd

mo khan <mo@mokhan.ca>
2014-06-14 15:06:23
install backbone and generate backbone cake model.
1 parent 75b8f0a
app/assets/javascripts/backbone/models/.gitkeep
app/assets/javascripts/backbone/models/cake.js.coffee
@@ -0,0 +1,10 @@
+class Cake.Models.Cake extends Backbone.Model
+  paramRoot: 'cake'
+
+  defaults:
+    name: null
+    story: null
+
+class Cake.Collections.CakesCollection extends Backbone.Collection
+  model: Cake.Models.Cake
+  url: '/cakes'
app/assets/javascripts/backbone/routers/.gitkeep
app/assets/javascripts/backbone/routers/cakes_router.js.coffee
@@ -0,0 +1,31 @@
+class Cake.Routers.CakesRouter extends Backbone.Router
+  initialize: (options) ->
+    @cakes = new Cake.Collections.CakesCollection()
+    @cakes.reset options.cakes
+
+  routes:
+    "new"      : "newCake"
+    "index"    : "index"
+    ":id/edit" : "edit"
+    ":id"      : "show"
+    ".*"       : "index"
+
+  newCake: ->
+    @view = new Cake.Views.Cakes.NewView(collection: @cakes)
+    $("#cakes").html(@view.render().el)
+
+  index: ->
+    @view = new Cake.Views.Cakes.IndexView(cakes: @cakes)
+    $("#cakes").html(@view.render().el)
+
+  show: (id) ->
+    cake = @cakes.get(id)
+
+    @view = new Cake.Views.Cakes.ShowView(model: cake)
+    $("#cakes").html(@view.render().el)
+
+  edit: (id) ->
+    cake = @cakes.get(id)
+
+    @view = new Cake.Views.Cakes.EditView(model: cake)
+    $("#cakes").html(@view.render().el)
app/assets/javascripts/backbone/templates/cakes/cake.jst.ejs
@@ -0,0 +1,6 @@
+<td><%= name %></td>
+<td><%= story %></td>
+
+<td><a href="#/<%= id %>">Show</td>
+<td><a href="#/<%= id %>/edit">Edit</td>
+<td><a href="#/<%= id %>/destroy" class="destroy">Destroy</a></td>
app/assets/javascripts/backbone/templates/cakes/edit.jst.ejs
@@ -0,0 +1,20 @@
+<h1>Edit cake</h1>
+
+<form id="edit-cake" name="cake">
+  <div class="field">
+    <label for="name"> name:</label>
+    <input type="text" name="name" id="name" value="<%= name %>" >
+  </div>
+
+  <div class="field">
+    <label for="story"> story:</label>
+    <input type="text" name="story" id="story" value="<%= story %>" >
+  </div>
+
+  <div class="actions">
+    <input type="submit" value="Update Cake" />
+  </div>
+
+</form>
+
+<a href="#/index">Back</a>
\ No newline at end of file
app/assets/javascripts/backbone/templates/cakes/index.jst.ejs
@@ -0,0 +1,15 @@
+<h1>Listing cakes</h1>
+
+<table id="cakes-table">
+  <tr>
+    <th>Name</th>
+    <th>Story</th>
+    <th></th>
+    <th></th>
+    <th></th>
+  </tr>
+</table>
+
+<br/>
+
+<a href="#/new">New Cake</a>
app/assets/javascripts/backbone/templates/cakes/new.jst.ejs
@@ -0,0 +1,20 @@
+<h1>New cake</h1>
+
+<form id="new-cake" name="cake">
+  <div class="field">
+    <label for="name"> name:</label>
+    <input type="text" name="name" id="name" value="<%= name %>" >
+  </div>
+
+  <div class="field">
+    <label for="story"> story:</label>
+    <input type="text" name="story" id="story" value="<%= story %>" >
+  </div>
+
+  <div class="actions">
+    <input type="submit" value="Create Cake" />
+  </div>
+
+</form>
+
+<a href="#/index">Back</a>
\ No newline at end of file
app/assets/javascripts/backbone/templates/cakes/show.jst.ejs
@@ -0,0 +1,12 @@
+<p>
+  <b>Name:</b>
+  <%= name %>
+</p>
+
+<p>
+  <b>Story:</b>
+  <%= story %>
+</p>
+
+
+<a href="#/index">Back</a>
\ No newline at end of file
app/assets/javascripts/backbone/templates/.gitkeep
app/assets/javascripts/backbone/views/cakes/cake_view.js.coffee
@@ -0,0 +1,19 @@
+Cake.Views.Cakes ||= {}
+
+class Cake.Views.Cakes.CakeView extends Backbone.View
+  template: JST["backbone/templates/cakes/cake"]
+
+  events:
+    "click .destroy" : "destroy"
+
+  tagName: "tr"
+
+  destroy: () ->
+    @model.destroy()
+    this.remove()
+
+    return false
+
+  render: ->
+    $(@el).html(@template(@model.toJSON()))
+    return this
app/assets/javascripts/backbone/views/cakes/edit_view.js.coffee
@@ -0,0 +1,24 @@
+Cake.Views.Cakes ||= {}
+
+class Cake.Views.Cakes.EditView extends Backbone.View
+  template : JST["backbone/templates/cakes/edit"]
+
+  events :
+    "submit #edit-cake" : "update"
+
+  update : (e) ->
+    e.preventDefault()
+    e.stopPropagation()
+
+    @model.save(null,
+      success : (cake) =>
+        @model = cake
+        window.location.hash = "/#{@model.id}"
+    )
+
+  render : ->
+    $(@el).html(@template(@model.toJSON() ))
+
+    this.$("form").backboneLink(@model)
+
+    return this
app/assets/javascripts/backbone/views/cakes/index_view.js.coffee
@@ -0,0 +1,20 @@
+Cake.Views.Cakes ||= {}
+
+class Cake.Views.Cakes.IndexView extends Backbone.View
+  template: JST["backbone/templates/cakes/index"]
+
+  initialize: () ->
+    @options.cakes.bind('reset', @addAll)
+
+  addAll: () =>
+    @options.cakes.each(@addOne)
+
+  addOne: (cake) =>
+    view = new Cake.Views.Cakes.CakeView({model : cake})
+    @$("tbody").append(view.render().el)
+
+  render: =>
+    $(@el).html(@template(cakes: @options.cakes.toJSON() ))
+    @addAll()
+
+    return this
app/assets/javascripts/backbone/views/cakes/new_view.js.coffee
@@ -0,0 +1,37 @@
+Cake.Views.Cakes ||= {}
+
+class Cake.Views.Cakes.NewView extends Backbone.View
+  template: JST["backbone/templates/cakes/new"]
+
+  events:
+    "submit #new-cake": "save"
+
+  constructor: (options) ->
+    super(options)
+    @model = new @collection.model()
+
+    @model.bind("change:errors", () =>
+      this.render()
+    )
+
+  save: (e) ->
+    e.preventDefault()
+    e.stopPropagation()
+
+    @model.unset("errors")
+
+    @collection.create(@model.toJSON(),
+      success: (cake) =>
+        @model = cake
+        window.location.hash = "/#{@model.id}"
+
+      error: (cake, jqXHR) =>
+        @model.set({errors: $.parseJSON(jqXHR.responseText)})
+    )
+
+  render: ->
+    $(@el).html(@template(@model.toJSON() ))
+
+    this.$("form").backboneLink(@model)
+
+    return this
app/assets/javascripts/backbone/views/cakes/show_view.js.coffee
@@ -0,0 +1,8 @@
+Cake.Views.Cakes ||= {}
+
+class Cake.Views.Cakes.ShowView extends Backbone.View
+  template: JST["backbone/templates/cakes/show"]
+
+  render: ->
+    $(@el).html(@template(@model.toJSON() ))
+    return this
app/assets/javascripts/backbone/views/.gitkeep
app/assets/javascripts/backbone/cake.js.coffee
@@ -0,0 +1,14 @@
+#= require_self
+#= require_tree ./templates
+#= require_tree ./models
+#= require_tree ./views
+#= require_tree ./routers
+
+window.Cake =
+  Models: {}
+  Collections: {}
+  Routers: {}
+  Views: {}
+  initialize: (data) ->
+    new Cake.Routers.CakesRouter({ cakes: data.cakes })
+    Backbone.history.start()
app/assets/javascripts/application.js
@@ -22,4 +22,9 @@
 //= require jquery.embedly
 //= require tag-it
 //= require bootstrap
+//= require underscore
+//= require backbone
+//= require backbone_rails_sync
+//= require backbone_datalink
+//= require backbone/cake
 //= require_tree .
app/controllers/cakes_controller.rb
@@ -0,0 +1,7 @@
+class CakesController < ApplicationController
+  respond_to :html, :json
+
+  def index
+    respond_with(@cakes = Creation.all.limit(10))
+  end
+end
app/views/cakes/index.html.erb
@@ -0,0 +1,8 @@
+<%= content_for :javascript do -%>
+  <%= javascript_tag do %>
+    Cake.initialize({ cakes: <%== @cakes.to_json %> });
+  <% end %>
+<% end -%>
+
+<div id="cakes">
+</div>
config/routes.rb
@@ -18,6 +18,7 @@ Cake::Application.routes.draw do
     resources :favorites, :only => [:index, :create]
     get 'page/:page', :action => :index, :on => :collection
   end
+  resources :cakes
 
   resources :profiles, :only => [:index, :show] do
     get 'page/:page', :action => :index, :on => :collection
Gemfile
@@ -35,6 +35,7 @@ gem 'spank'
 gem 'exifr'
 gem 'aws-sdk'
 gem 'mime-types'
+gem 'rails-backbone'
 
 group :development do
   gem 'capistrano'
Gemfile.lock
@@ -100,6 +100,7 @@ GEM
     dotenv-deployment (0.0.2)
     dotenv-rails (0.11.1)
       dotenv (= 0.11.1)
+    ejs (1.0.0)
     equalizer (0.0.9)
     erubis (2.7.0)
     exception_notification (4.0.1)
@@ -213,6 +214,10 @@ GEM
       bundler (>= 1.3.0, < 2.0)
       railties (= 4.0.5)
       sprockets-rails (~> 2.0.0)
+    rails-backbone (0.7.2)
+      coffee-script (~> 2.2.0)
+      ejs (~> 1.0.0)
+      railties (>= 3.1.0)
     railties (4.0.5)
       actionpack (= 4.0.5)
       activesupport (= 4.0.5)
@@ -353,6 +358,7 @@ DEPENDENCIES
   pg
   poltergeist
   rails (~> 4.0.5)
+  rails-backbone
   rmagick (~> 2.13.0)
   rspec-rails
   sass-rails (~> 4.0)