DC MS infinite scroll with isotope on new profile page. boom!

app/assets/javascripts/app/models/stream.js

@@ -59,5 +59,12 @@ app.models.Stream = Backbone.Collection.extend({
 
   add : function(models){
     this.items.add(models)
+  },
+
+  preload : function(){
+    var preloadJson = window.preLoadContent && JSON.parse(window.preLoadContent)
+    delete window.preLoadContent // always do this just to be safe in preventing dirty state across navigates
+
+    if(preloadJson) { this.items.reset(preloadJson) }
   }
 });

app/assets/javascripts/app/pages/profile.js

@@ -1,12 +1,13 @@
 //= require ../views/small_frame
+//= require ../views/profile_info_view
 
 app.pages.Profile = app.views.Base.extend({
-
   className : "container",
 
   templateName : "profile",
 
   subviews : {
+    "#profile-info" : "profileInfo",
     "#canvas" : "canvasView"
   },
 
@@ -19,10 +20,10 @@ app.pages.Profile = app.views.Base.extend({
   initialize : function(options) {
     this.model = new app.models.Profile.findByGuid(options.personId)
     this.stream = options && options.stream || new app.models.Stream()
-    this.stream.fetch();
-    this.model.bind("change", this.render, this) //this should go on profile info view when it gets Extracted
+    this.stream.preload()
 
-    this.canvasView = new app.views.Canvas({model : this.stream})
+    this.canvasView = new app.views.Canvas({ model : this.stream })
+    this.profileInfo = new app.views.ProfileInfo({ model : this.model })
   },
 
   toggleEdit : function(evt) {
@@ -30,5 +31,4 @@ app.pages.Profile = app.views.Base.extend({
     this.editMode = !this.editMode
     this.$el.toggleClass("edit-mode")
   }
-
 });

app/assets/javascripts/app/views.js

@@ -89,7 +89,8 @@ app.views.infiniteScrollMixin = {
     this.bind("loadMore", this.fetchAndshowLoader, this)
     this.stream.bind("fetched", this.hideLoader, this)
     this.stream.bind("allItemsLoaded", this.unbindInfScroll, this)
-    this.collection.bind("add", this.addPost, this);
+
+    this.collection.bind("add", this.addPostView, this);
 
     var throttledScroll = _.throttle(_.bind(this.infScroll, this), 200);
     $(window).scroll(throttledScroll);
@@ -99,12 +100,15 @@ app.views.infiniteScrollMixin = {
     if(this.stream.isFetching()) { this.showLoader() }
   },
 
-  addPost : function(post) {
-    var postView = new this.postClass({ model: post })
-      , placeInStream = (this.collection.at(0).id == post.id) ? "prepend" : "append";
-
-    this.$el[placeInStream](postView.render().el);
+  createPostView : function(post){
+    var postView = new this.postClass({ model: post });
     this.postViews.push(postView)
+    return postView
+  },
+
+  addPostView : function(post) {
+    var placeInStream = (this.collection.at(0).id == post.id) ? "prepend" : "append";
+    this.$el[placeInStream](this.createPostView(post).render().el);
   },
 
   unbindInfScroll : function() {
@@ -122,7 +126,7 @@ app.views.infiniteScrollMixin = {
   },
 
   hideLoader: function() {
-    $("#paginate .loader").addClass("hidden")
+      $("#paginate .loader").addClass("hidden")
   },
 
   infScroll : function() {

app/assets/javascripts/app/views/canvas_view.js

@@ -1,19 +1,26 @@
-app.views.Canvas = app.views.Base.extend(_.extend(app.views.infiniteScrollMixin, {
+app.views.Canvas = app.views.Base.extend(_.extend({}, app.views.infiniteScrollMixin,  {
   initialize: function(){
     this.stream = this.model
     this.collection = this.stream.items
-    this.postClass = app.views.SmallFrame,
+    this.postClass = app.views.SmallFrame
     this.setupInfiniteScroll()
   },
 
   renderTemplate : function() {
-    this.postRenderTemplate();
-    //setTimeout(_.bind(this.mason, this), 1000)
+    this.stream.items.each(_.bind(function(post){
+      this.$el.append(this.createPostView(post).render().el);
+    }, this))
+    //needs to be defered so it happens after html rendering finishes
+    _.defer(_.bind(this.mason, this))
   },
 
-  mason : function() {
+  addPostView : function(post) {
+    _.defer(_.bind(function(){ this.$el.isotope("insert", this.createPostView(post).render().$el) }, this))
+  },
+
+    mason : function() {
     this.$el.isotope({
       itemSelector : '.canvas-frame'
     })
   }
-}))
+}));

app/assets/javascripts/app/views/profile_info_view.js

@@ -0,0 +1,7 @@
+app.views.ProfileInfo = app.views.Base.extend({
+  templateName : "profile-info",
+
+  initialize : function(){
+    this.model.bind("change", this.render, this) //this should go on profile info view when it gets Extracted
+  }
+})

app/assets/stylesheets/new_styles/_spinner.scss

@@ -8,6 +8,11 @@
 
   .loader {
     display: inline-block;
+
+    &.hidden{
+      display : none;
+    }
+
     width : 14px;
     height: 14px;
     background-image : url(asset_path("static-loader.png", "image"))

app/assets/templates/profile-info.jst.hbs

@@ -0,0 +1,7 @@
+<h1>{{full_name}}</h1>
+<dl>
+    <dt>Location:</dt><dd>{{location}}</dd>
+    <dt>Bio:</dt><dd>{{bio}}</dd>
+    <dt>Birthday:</dt><dd>{{birthday}}</dd>
+    <dt>Gender:</dt><dd>{{gender}}</dd>
+</dl>

app/assets/templates/profile.jst.hbs

@@ -2,15 +2,7 @@
     editing...
 </div>
 
-<section id="profile_info">
-    <h1>{{full_name}}</h1>
-    <dl>
-        <dt>Location:</dt><dd>{{location}}</dd>
-        <dt>Bio:</dt><dd>{{bio}}</dd>
-        <dt>Birthday:</dt><dd>{{birthday}}</dd>
-        <dt>Gender:</dt><dd>{{gender}}</dd>
-    </dl>
-</section>
+<section id="profile-info"/>
 
 <a href="/posts/new">COMPOSE</a> |
 <a href="#" id="edit-mode-toggle">EDIT</a>

app/controllers/people_controller.rb

@@ -123,7 +123,7 @@ class PeopleController < ApplicationController
       format.all do
         if params[:ex]
           @page = :experimental
-          render 'experimental', :layout => 'post'
+          render :text => @stream.stream_posts.as_api_response(:backbone).to_json, :layout => 'post'
         else
           respond_with @person, :locals => {:post_type => :all}
         end

app/views/layouts/post.html.haml

@@ -55,5 +55,4 @@
   %body
     = flash_messages
     #container
-
-    = yield
+    = javascript_tag  "window.preLoadContent = '#{escape_javascript(yield)}'"

spec/javascripts/app/pages/profile_spec.js

@@ -18,10 +18,10 @@ describe("app.pages.Profile", function(){
     expect(this.page.canvasView.model).toBe(this.stream)
   });
 
-  it("fetches the stream for the user", function(){
-    spyOn(this.stream, "fetch")
+  it("preloads the stream for the user", function(){
+    spyOn(this.stream, "preload")
     new app.pages.Profile({stream : this.stream})
-    expect(this.stream.fetch).toHaveBeenCalled()
+    expect(this.stream.preload).toHaveBeenCalled()
   })
 
   describe("rendering", function(){

spec/javascripts/app/views/photos_view_spec.js

@@ -12,7 +12,7 @@ describe("app.views.Photos", function() {
     // do this manually because we've moved loadMore into render??
     this.view.render();
     _.each(this.view.collection.models, function(photo) {
-      this.view.addPost(photo);
+      this.view.addPostView(photo);
     }, this);
   });
 

spec/javascripts/app/views/stream_view_spec.js

@@ -12,7 +12,7 @@ describe("app.views.Stream", function() {
     // do this manually because we've moved loadMore into render??
     this.view.render();
     _.each(this.view.collection.models, function(post) {
-      this.view.addPost(post);
+      this.view.addPostView(post);
     }, this);
   });