introduce comments

app/views/comments/create.js.erb

+var post = App.stream.collection.get(<%= @comment.post.id %>);
+
+console.log(post);
+
 ContentUpdater.addCommentToPost("<%= @comment.post.guid %>",
    "<%= @comment.guid%>",
    "<%= escape_javascript(render(:partial => 'comments/comment', :locals => { :comment => @comment, :person => current_user.person, :post => @comment.post}))%>");

app/views/layouts/application.html.haml

@@ -45,9 +45,6 @@
           current_user: #{current_user.person.as_api_response(:backbone).to_json}
         });
 
-        Diaspora.I18n.loadLocale(#{get_javascript_strings_for(I18n.locale).to_json}, "#{I18n.locale}");
-        Diaspora.Page = "#{params[:controller].camelcase}#{params[:action].camelcase}";
-
     = yield(:head)
 
     -unless Rails.env == "production"
@@ -80,6 +77,9 @@
     %script{:id => "stream-element-template", :type => 'text/template'}
       != File.read("#{Rails.root}/app/views/shared/_stream_element.html.underscore")
 
+    %script{:id => "comment-template", :type => 'text/template'}
+      != File.read("#{Rails.root}/app/views/shared/_comment.html.underscore")
+
     .container{:style=> "#{yield(:break_the_mold)}"}
       - if @aspsect == :getting_started || @page == :logged_out
         = yield

app/views/shared/_comment.html.underscore

+<li id="<%= id %>" class="comment">
+  <div class="right controls">
+    <!-- need access to post -->
+    <% if(author.id === current_user.id) { %>
+      <!-- LINK BROKEN FOR NOW -->
+      <a href="/posts/<%= id %>/comments/<%= id %>" class="delete comment_delete" data-original-title="Delete">
+        <img alt="Deletelabel" src="/images/deletelabel.png">
+      </a>
+    <% } %>
+  </div>
+
+  <a href="/people/<%= author.id %>">
+    <img src="<%= author.avatar.small %>" class="avatar" data-person-id="<%= author.id %>"/>
+  </a>
+
+  <div class="content">
+    <span class="from">
+      <a href="/people/<%= author.id %>">
+        <%= author.name %>
+      </a>
+    </span>
+
+    <p>
+      <%= text %>
+    </p>
+
+    <div class="comment_info">
+      <time class="timeago" datetime="<%= created_at %>"/>
+    </div>
+  </div>
+</li>

app/views/shared/_stream_element.html.underscore

@@ -78,43 +78,7 @@
               </li>
             </ul>
 
-            <ul class="comments">
-
-              <% _.each(last_three_comments, function(comment) { %>
-                <li id="<%= comment.guid %>" class="comment">
-
-                  <% if(comment.author.id == current_user.id || author.id == current_user.id) { %>
-                    <div class="right controls">
-                      <a href="/posts/<%= id %>/comments/<%= comment.id %>" class="delete comment_delete" data-original-title="Delete">
-                        <img alt="Deletelabel" src="/images/deletelabel.png">
-                      </a>
-                    </div>
-                  <% } %>
-
-                  <a href="/people/<%= author.id %>">
-                    <img src="<%= comment.author.avatar.small %>" class="avatar" data-person-id="<%= comment.author.id %>"/>
-                  </a>
-
-                  <div class="content">
-                    <span class="from">
-                      <a href="/people/<%= comment.author.id %>">
-                        <%= comment.author.name %>
-                      </a>
-                    </span>
-
-                    <p>
-                      <%= comment.text %>
-                    </p>
-
-                    <div class="comment_info">
-                      <time class="timeago" datetime="<%= comment.created_at %>"/>
-                    </div>
-
-                  </div>
-                </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">

public/javascripts/app.js

@@ -18,8 +18,6 @@ var App = {
 
     Backbone.history.start({pushState: true});
   }
-
-
 };
 
 $(function() { App.initialize(); });

public/javascripts/collections/comments.js

+App.Collections.Comments = Backbone.Collection.extend({
+  model: App.Models.Comment
+});

public/javascripts/collections/stream.js

@@ -2,7 +2,7 @@ App.Collections.Stream = Backbone.Collection.extend({
   url: function() {
     var path = document.location.pathname + ".json";
 
-    if(this.models.length) { path += "?max_time=" + _.last(this.models).intTime(); }
+    if(this.models.length) { path += "?max_time=" + _.last(this.models).createdAt(); }
 
     return path;
   },

public/javascripts/models/comment.js

+App.Models.Comment = Backbone.Model.extend({
+});

public/javascripts/models/post.js

 App.Models.Post = Backbone.Model.extend({
   url: "/posts/:id",
-  intTime: function(){
+
+  initialize: function() {
+    this.comments = new App.Collections.Comments(this.get("last_three_comments"));
+  },
+
+  createdAt: function(){
     return +new Date(this.get("created_at")) / 1000;
   }
 });

public/javascripts/views/comment-stream.js

+App.Views.CommentStream = Backbone.View.extend({
+  initialize: function(options) {
+    this.collection = options.collection;
+  },
+
+  render: function() {
+    var self = this;
+    
+    this.collection.each(function(comment) {
+      $(self.el).append(new App.Views.Comment({
+        model: comment
+      }).render());
+    });
+
+    return this.el;
+  }
+});

public/javascripts/views/comment.js

+App.Views.Comment = Backbone.View.extend({
+  initialize: function(options) {
+    this.model = options.model;
+    this.template = _.template($("#comment-template").html());
+  },
+
+  render: function() {
+    this.el = $(this.template($.extend(
+      this.model.toJSON(),
+      App.user()
+    )));
+
+    console.log(this.el);
+
+    return this.el;
+  }
+});

public/javascripts/views/post.js

+App.Views.Post = Backbone.View.extend({
+  initialize: function(options) {
+    this.model = options.model;
+    this.template = _.template($("#stream-element-template").html());
+  },
+
+  render: function() {
+    this.el = $(this.template($.extend(
+      this.model.toJSON(),
+      App.user()
+    )));
+
+    this.$("ul.comments").html(new App.Views.CommentStream({
+      collection: this.model.comments
+    }).render());
+
+    this.$(".details time").timeago();
+    this.$("label").inFieldLabels();
+    
+    return this.el;
+  }
+});

public/javascripts/views/stream.js

@@ -5,28 +5,21 @@ App.Views.Stream = Backbone.View.extend({
 
   initialize: function(){
     this.el = $("#main_stream");
-    this.template = _.template($("#stream-element-template").html());
-
     _.bindAll(this, "appendPost", "collectionFetched");
 
     this.collection = new App.Collections.Stream;
     this.collection.bind("add", this.appendPost);
+
     this.loadMore();
   },
 
-  appendPost: function(model) {
-    var post = $(this.template($.extend(
-      model.toJSON(),
-      App.user()
-    )));
-    $(this.el).append(post);
-    Diaspora.BaseWidget.instantiate("StreamElement", post);
+  appendPost: function(post) {
+    $(this.el).append(new App.Views.Post({
+      model: post
+    }).render());
   },
 
   collectionFetched: function() {
-    this.$(".details time").timeago();
-    this.$("label").inFieldLabels();
-
     this.$("#paginate").remove();
     $(this.el).append($("<a>", {
       href: this.collection.url(),
@@ -35,9 +28,7 @@ App.Views.Stream = Backbone.View.extend({
   },
 
   loadMore: function(evt) {
-    if(evt) {
-      evt.preventDefault();
-    }
+    if(evt) { evt.preventDefault(); }
 
     this.collection.fetch({
       add: true,

spec/javascripts/collections/stream-spec.js

+describe("Stream", function() {
+  describe("url", function() {
+    var stream = new BackboneStream(),
+      expectedPath = document.location.pathname + ".json";
+    it("returns the json path", function() {
+      expect(stream.url()).toEqual(expectedPath);
+    });    
+
+    it("returns the json path with max_time if the collection has models", function() {
+      var post = new Post();
+      spyOn(post, "createdAt").andReturn(1234);
+
+      stream.add(post);
+      
+      expect(stream.url()).toEqual(expectedPath + "?max_time=1234");
+    });
+  });
+});

spec/javascripts/models/post-spec.js

+describe("App.Models.Post", function() {
+  describe("createdAt", function() {
+    var post = new App.Models.Post();
+    it("returns the post's created_at as an integer", function() {
+      var date = new Date;
+      post.set({ created_at: +date * 1000 });
+
+      expect(typeof post.createdAt()).toEqual("number");
+      expect(post.createdAt()).toEqual(+date);
+    });
+  });
+});

spec/javascripts/support/jasmine.yml

@@ -25,6 +25,8 @@ src_files:
   - public/javascripts/vendor/timeago.js
   - public/javascripts/vendor/facebox.js
   - public/javascripts/jquery.infieldlabel-custom.js
+  - public/javascripts/vendor/underscore.js
+  - public/javascripts/vendor/backbone.js
   - public/javascripts/fileuploader-custom.js
   - public/javascripts/jquery.autocomplete-custom.js
   - public/javascripts/diaspora.js
@@ -33,7 +35,12 @@ src_files:
   - public/javascripts/pages/*
   - public/javascripts/helpers/*
   - public/javascripts/widgets/*
-  
+ 
+  - public/javascripts/app.js
+  - public/javascripts/models/*
+  - public/javascripts/collections/*
+  - public/javascripts/views/*
+
   - public/javascripts/mobile.js
   - public/javascripts/contact-list.js
   - public/javascripts/web-socket-receiver.js