DG DH; backbone stream now sort-of renders on multis_controller; wip

app/controllers/application_controller.rb

@@ -145,10 +145,14 @@ class ApplicationController < ActionController::Base
     end
   end
 
+  def stream(stream_klass)
+    stream_klass.new(current_user, :max_time => max_time, :order => sort_order)
+  end
+
   def default_stream_action(stream_klass)
     authenticate_user!
     save_sort_order
-    @stream = stream_klass.new(current_user, :max_time => max_time, :order => sort_order)
+    @stream = stream(stream_klass)
 
     if params[:only_posts]
       render :partial => 'shared/stream', :locals => {:posts => @stream.stream_posts}

app/controllers/multis_controller.rb

@@ -5,7 +5,15 @@
 require File.join(Rails.root, 'lib', 'stream', 'multi')
 
 class MultisController < ApplicationController
+
+  respond_to :html, :json
+
   def index
-    default_stream_action(Stream::Multi)
+    @backbone = true
+
+    respond_with do |format|
+      format.html{ default_stream_action(Stream::Multi) }
+      format.json{ render :json => stream(Stream::Multi).stream_posts.to_json(:include => :author) }
+    end
   end
 end

app/views/aspects/_aspect_stream.haml

@@ -19,10 +19,12 @@
 #gs-shim{:title => popover_with_close_html("3. #{t('.stay_updated')}"), 'data-content' => t('.stay_updated_explanation')}
 
 #main_stream.stream{:data => {:guids => stream.aspect_ids.join(','), :time_for_scroll => time_for_scroll(stream.ajax_stream?, stream)}}
-  - if !stream.ajax_stream? && stream.stream_posts.length > 0
+  - if !@backbone && !stream.ajax_stream? && stream.stream_posts.length > 0
     = render 'shared/stream', :posts => stream.stream_posts
-  #pagination
-    =link_to(t('more'), next_page_path(:ajax_stream => stream.ajax_stream?), :class => 'paginate')
+
+  - if !@backbone
+    #pagination
+      =link_to(t('more'), next_page_path(:ajax_stream => stream.ajax_stream?), :class => 'paginate')
 
 - if current_user.contacts.size < 2
   = render 'aspects/no_contacts_message'

app/views/aspects/index.html.haml

@@ -6,6 +6,11 @@
 - content_for :head do
   = include_javascripts :home
 
+  - if @backbone
+    :javascript
+      window.useBackbone = true;
+
+
 - if current_user.getting_started?
   #welcome-to-diaspora
     .container{:style => "position: relative;"}

app/views/layouts/application.html.haml

@@ -73,6 +73,9 @@
     %header{:class=>('landing' unless current_user)}
       = render 'layouts/header'
 
+    %script{:id => "stream-element-template", :type => 'text/template'}
+      != File.read("#{Rails.root}/app/views/shared/_stream_element.html.underscore")
+
     .container{:style=> "#{yield(:break_the_mold)}"}
       - if @aspsect == :getting_started || @page == :logged_out
         = yield

app/views/shared/_stream_element.html.underscore

+<% var post = typeof(status_message) === "undefined" ? (typeof(reshare) === "undefined" ? photo : reshare) : status_message; %>
+
+<div id="<%= post.guid %>" class="stream_element">
+  <div class="right controls">
+    <span>block</span>
+    <span>delete_or_hide</span>
+
+    <img src="/images/ajax-loader.gif" class="hide_loader hidden"/>
+  </div>
+
+  <div class="sm_body">
+    <div class="content">
+      <div class="post_initial_info">
+        <span class="from">
+          <a href="/people/<%= post.author.id %>">
+            <%= post.author.diaspora_handle %>
+          </a>
+        </span>
+
+        <span class="details">
+          -
+          <span class="timeago">
+            <%= post.created_at %>
+          </span>
+        </span>
+
+        <p>
+          <%= post.text %>
+        </p>
+
+        <div class="info">
+          <span class="via">
+            via <%= post.provider_display_name %>
+          </span>
+        </div>
+
+        <div class="comments">
+          comments
+        </div>
+
+      </div>
+    </div>
+</div>

config/assets.yml

@@ -3,13 +3,22 @@ embed_assets: datauri
 compress_assets: on
 gzip_assets: off
 javascripts:
+
   flash_socket:
     - public/javascripts/vendor/FABridge.js
     - public/javascripts/vendor/swfobject.js
     - public/javascripts/vendor/web_socket.js
   jquery:
     - public/javascripts/vendor/jquery162.min.js
+
   main:
+    - public/javascripts/vendor/underscore.js
+    - public/javascripts/vendor/backbone.js
+
+    - public/javascripts/models/*
+    - public/javascripts/collections/*
+    - public/javascripts/views/*
+
     - public/javascripts/rails.validations.js
     - public/javascripts/rails.js
     - public/javascripts/vendor/jquery.hotkeys.js
@@ -50,7 +59,7 @@ javascripts:
     - public/javascripts/rails.js # we only include this to hijack ajax requests
     - public/javascripts/vendor/mbp-helper.js
     - public/javascripts/mobile.js
-    
+
   mailchimp:
     - public/javascripts/vendor/mailchimp/jquery.form.js
     - public/javascripts/vendor/mailchimp/jquery.validate.js

public/javascripts/collections/stream.js

+var BackboneStream = Backbone.Collection.extend({
+  url: "stream.json",
+  model: Post
+});

public/javascripts/models/post.js

+var Post = Backbone.Model.extend({
+  url: "/posts/:id"
+});

public/javascripts/views/stream-view.js

+$(function() {
+  window.StreamView = Backbone.View.extend({
+
+    el: $("#main_stream"),
+
+    template: _.template($('#stream-element-template').html()),
+
+    initialize: function(){
+      _.bindAll(this, "appendPost");
+
+      this.collection = new window.BackboneStream;
+      this.collection.bind("add", this.appendPost);
+      this.collection.fetch({add: true});
+    },
+
+    appendPost: function(model) {
+      $(this.el).append(this.template(model.toJSON()));
+    },
+  });
+
+  if(window.useBackbone) {
+    window.stream = new window.StreamView;
+  }
+});