expand comments working

app/controllers/comments_controller.rb

@@ -6,8 +6,9 @@ class CommentsController < ApplicationController
   include ApplicationHelper
   before_filter :authenticate_user!, :except => [:index]
 
-  respond_to :html, :mobile, :except => :show
+  respond_to :html,
-  respond_to :js, :only => [:index]
+             :mobile,
+             :json
 
   rescue_from ActiveRecord::RecordNotFound do
     render :nothing => true, :status => 404
@@ -26,7 +27,7 @@ class CommentsController < ApplicationController
         Postzord::Dispatcher.build(current_user, @comment).post
 
         respond_to do |format|
-          format.json  { render :json => @comment.as_api_response(:backbone), :status => 201 }
+          format.json{ render :json => @comment.as_api_response(:backbone), :status => 201 }
           format.html{ render :nothing => true, :status => 201 }
           format.mobile{ render :partial => 'comment', :locals => {:post => @comment.post, :comment => @comment} }
         end
@@ -65,13 +66,11 @@ class CommentsController < ApplicationController
 
     if @post
       @comments = @post.comments.includes(:author => :profile).order('created_at ASC')
-      render :layout => false
+      respond_with do |format|
+        format.json  { render :json => @post.comments.as_api_response(:backbone), :status => 200 }
+      end
     else
       raise ActiveRecord::RecordNotFound.new
     end
   end
-
-  def new
-    render :layout => false
-  end
 end

app/views/templates/comment_stream.ujs

@@ -1,11 +1,14 @@
 <div class="comment_stream">
-  <ul class="show_comments <%= comments_count <= 3 ? 'hidden' : '' %>">
+
-    <li>
+  <% if(typeof(all_comments_loaded) == 'undefined' || !all_comments_loaded) { %>
-      <a href="/posts/<%= id %>/comments" class="toggle_post_comments">
+    <ul class="show_comments <%= comments_count <= 3 ? 'hidden' : '' %>">
-        Show <%= comments_count - 3 %> more comments
+      <li>
-      </a>
+        <a href="/posts/<%= id %>/comments" class="toggle_post_comments">
-    </li>
+          Show <%= comments_count - 3 %> more comments
-  </ul>
+        </a>
+      </li>
+    </ul>
+  <% } %>
 
   <ul class="comments"> </ul>
 

public/javascripts/app/models/post.js

@@ -1,13 +1,14 @@
 App.Models.Post = Backbone.Model.extend({
-  url: function(){
-    return "/posts/" + this.id;
-  },
-
   initialize: function() {
     this.comments = new App.Collections.Comments(this.get("last_three_comments"));
+    this.comments.url = this.url() + '/comments';
 
     this.likes = new App.Collections.Likes(this.get("user_like")); // load in the user like initially
-    this.likes.url = '/posts/' + this.id + '/likes';
+    this.likes.url = this.url() + '/likes';
+  },
+
+  url: function(){
+    return "/posts/" + this.id;
   },
 
   createdAt: function(){

public/javascripts/app/views/commment_stream_view.js

@@ -1,7 +1,8 @@
 App.Views.CommentStream = Backbone.View.extend({
   events: {
     "submit form": "createComment",
-    "focus .comment_box": "commentTextareaFocused"
+    "focus .comment_box": "commentTextareaFocused",
+    "click .toggle_post_comments": "expandComments"
   },
 
   initialize: function(options) {
@@ -9,7 +10,7 @@ App.Views.CommentStream = Backbone.View.extend({
     this.template = _.template($("#comment-stream-template").html());
 
     _.bindAll(this, "appendComment");
-    this.model.comments.bind("add", this.appendComment);
+    this.model.comments.bind('add', this.appendComment, this);
   },
 
   render: function() {
@@ -45,6 +46,18 @@ App.Views.CommentStream = Backbone.View.extend({
 
   commentTextareaFocused: function(evt){
     this.$("form").removeClass('hidden').addClass("open");
+  },
+
+  expandComments: function(evt){
+    if(evt){ evt.preventDefault(); }
+
+    var self = this;
+    this.model.comments.fetch({
+      success : function(){
+        self.model.set({all_comments_loaded : true});
+        self.render();
+      }
+    });
   }
 
 });