DH DG; create comments via backbone

app/controllers/comments_controller.rb

@@ -26,7 +26,7 @@ class CommentsController < ApplicationController
         Postzord::Dispatcher.build(current_user, @comment).post
 
         respond_to do |format|
-          format.js{ render(:create, :status => 201)}
+          format.json  { render :json => @comment.as_api_response(:backbone) }
           format.html{ render :nothing => true, :status => 201 }
           format.mobile{ render :partial => 'comment', :locals => {:post => @comment.post, :comment => @comment} }
         end

app/views/comments/create.js.erb

@@ -1,4 +1,4 @@
-var post = App.stream.collection.get(<%= @comment.post.id %>);
+App.stream.collection.get(<%= @comment.post.id %>);
 
 console.log(post);
 

app/views/layouts/application.html.haml

@@ -80,6 +80,9 @@
     %script{:id => "comment-template", :type => 'text/template'}
       != File.read("#{Rails.root}/app/views/shared/_comment.html.underscore")
 
+    %script{:id => "comment-stream-template", :type => 'text/template'}
+      != File.read("#{Rails.root}/app/views/shared/_comment_stream.html.underscore")
+
     .container{:style=> "#{yield(:break_the_mold)}"}
       - if @aspsect == :getting_started || @page == :logged_out
         = yield

app/views/shared/_comment_stream.html.underscore

@@ -0,0 +1,27 @@
+<div class="comment_stream">
+  <ul class="show_comments <%= comments_count <= 3 ? 'hidden' : '' %>">
+    <li>
+      <a href="/posts/<%= id %>/comments" class="toggle_post_comments">
+        Show <%= comments_count - 3 %> more comments
+      </a>
+    </li>
+  </ul>
+
+  <ul class="comments"> </ul>
+
+  <div class="new_comment_form_wrapper <%= comments_count > 0 ? '' : 'hidden' %>">
+    <form accept-charset="UTF-8" action="/posts/<%= id %>/comments" class="new_comment" id="new_comment_on_<%= id %>" method="post">
+      <a href="/people/<%= current_user.id %>">
+        <img src="<%= current_user.avatar.small %>" class="avatar" data-person-id="<%= current_user.id %>"/>
+      </a>
+
+      <p>
+        <label for="comment_text_on_<%= id %>">Comment</label>
+        <textarea class="comment_box" id="comment_text_on_<%= id %>" name="text" rows="2" />
+      </p>
+      <div class="submit_button">
+        <input class="comment_submit button creation" id="comment_submit_<%= id %>" name="commit" type="submit" value="Comment" />
+      </div>
+    </form>
+  </div>
+</div>

app/views/shared/_stream_element.html.underscore

@@ -67,37 +67,7 @@
           </div>
         </div>
 
-        <div class="comments">
+        <div class="comments"> </div>
-          <div class="comment_stream">
-
-            <ul class="show_comments <%= comments_count <= 3 ? 'hidden' : '' %>">
-              <li>
-                <a href="/posts/<%= id %>/comments" class="toggle_post_comments">
-                  Show <%= comments_count - 3 %> more comments
-                </a>
-              </li>
-            </ul>
-
-            <ul class="comments"> </ul>
-
-            <div class="new_comment_form_wrapper <%= comments_count > 0 ? '' : 'hidden' %>">
-              <form accept-charset="UTF-8" action="/posts/<%= id %>/comments" class="new_comment" data-remote="true" id="new_comment_on_<%= id %>" method="post">
-                <a href="/people/<%= current_user.id %>">
-                  <img src="<%= current_user.avatar.small %>" class="avatar" data-person-id="<%= current_user.id %>"/>
-                </a>
-
-                <p>
-                  <label for="comment_text_on_<%= id %>">Comment</label>
-                  <textarea class="comment_box" id="comment_text_on_<%= id %>" name="text" rows="2" />
-                </p>
-                <div class="submit_button">
-                  <input class="comment_submit button creation" data-disable-with="Commenting..." id="comment_submit_<%= id %>" name="commit" type="submit" value="Comment" />
-                </div>
-              </form>
-            </div>
-
-          </div>
-        </div>
 
       </div>
     </div>

public/javascripts/models/comment.js

@@ -1,2 +1,5 @@
 App.Models.Comment = Backbone.Model.extend({
+  url: function() {
+    return "/posts/" + this.get("post_id") + "/comments";
+  }
 });

public/javascripts/models/post.js

@@ -1,5 +1,5 @@
 App.Models.Post = Backbone.Model.extend({
-  url: "/posts/:id",
+  url: "/posts",
 
   initialize: function() {
     this.comments = new App.Collections.Comments(this.get("last_three_comments"));

public/javascripts/views/comment-stream.js

@@ -1,17 +1,45 @@
 App.Views.CommentStream = Backbone.View.extend({
+  events: {
+    "submit form": "createComment"
+  },
+
   initialize: function(options) {
-    this.collection = options.collection;
+    this.model = options.model;
+    this.template = _.template($("#comment-stream-template").html());
+
+    _.bindAll(this, "appendComment");
+    this.model.comments.bind("add", this.appendComment);
   },
 
   render: function() {
     var self = this;
-    
+
-    this.collection.each(function(comment) {
+    $(this.el).html(this.template($.extend(
-      $(self.el).append(new App.Views.Comment({
+      this.model.toJSON(),
-        model: comment
+      App.user()
-      }).render());
+    )));
-    });
+
+    this.model.comments.each(this.appendComment);
 
     return this.el;
+  },
+
+  createComment: function(evt) {
+    evt.preventDefault();
+
+    this.model.comments.create({
+      "text" : this.$(".comment_box").val(),
+      "post_id" : this.model.id
+    });
+
+    this.$(".comment_box").val("");
+    return this;
+  },
+
+  appendComment: function(comment) {
+    this.$("ul.comments").append(new App.Views.Comment({
+      model: comment
+    }).render());
   }
+
 });

public/javascripts/views/comment.js

@@ -10,8 +10,6 @@ App.Views.Comment = Backbone.View.extend({
       App.user()
     )));
 
-    console.log(this.el);
-
     return this.el;
   }
 });

public/javascripts/views/post.js

@@ -1,22 +1,26 @@
 App.Views.Post = Backbone.View.extend({
+
   initialize: function(options) {
     this.model = options.model;
     this.template = _.template($("#stream-element-template").html());
   },
 
   render: function() {
+    var self = this;
     this.el = $(this.template($.extend(
       this.model.toJSON(),
       App.user()
-    )));
+    )))[0];
 
-    this.$("ul.comments").html(new App.Views.CommentStream({
+    this.$(".comments").html(new App.Views.CommentStream({
-      collection: this.model.comments
+      model: this.model
     }).render());
 
     this.$(".details time").timeago();
     this.$("label").inFieldLabels();
-    
+
+    Diaspora.BaseWidget.instantiate("StreamElement", $(this.el));
+
     return this.el;
   }
 });