still working on rank animation

client/helpers/handlebars.js

@@ -1,6 +1,9 @@
 // ** Handlebars helpers **
 
-Handlebars.registerHelper('each_with_index', function(items, options) {
+Handlebars.registerHelper('eachWithRank', function(items, options) {
+  console.log('======= eachWithRank ========')
+  // note: cannot use this because it would delete and recreate all nodes
+  items.rewind()
   var out = '';
   items.forEach(function(item, i){
     var key = 'Branch-' + i;
@@ -8,10 +11,9 @@ Handlebars.registerHelper('each_with_index', function(items, options) {
       return options.fn(_.extend(item, {rank: i}));
     });
   });
-  console.log('each_with_index:')
-  console.log(out)
   return out;
 });
+
 Handlebars.registerHelper('getSetting', function(setting, defaultArgument){
   return getSetting(setting, defaultArgument);
 });

client/helpers/router.js

@@ -256,15 +256,14 @@ PostsListController = RouteController.extend({
     Session.set('postsLimit', limit);
 
     // get posts and decorate them with rank property
+    // note: using handlebars helper instead
     // posts = posts.map(function (post, index) {
     //   post.rank = index;
     //   return post;
     // });
 
-    console.log('postsWithRank:')
-    console.log(posts)
     return {
-      posts: posts
+      postsList: posts
     }
   },
   after: function() {

client/views/posts/post_item.js

@@ -78,7 +78,6 @@ Template.post_item.helpers({
 
 Template.post_item.rendered = function(){
   // animate post from previous position to new position
-  console.log(this)
   var instance = this;
   var $instance = $(instance.firstNode.nextSibling);
   var rank = instance.data.rank; // use jQuery instead of decorating the data object
@@ -87,15 +86,16 @@ Template.post_item.rendered = function(){
   var previousPosition = 0;
   var newPosition = $instance.position().top;
 
-  console.log('-----------------------')
-  console.log('headline: '+this.data.headline)
-  console.log('new rank: '+(rank+1))
-  console.log('newPosition: '+newPosition)
+  // console.log('-----------------------')
+  // console.log('headline: '+this.data.headline)
+  // console.log('new rank: '+(rank+1))
+  // console.log('newPosition: '+newPosition)
 
   // if element has a currentPosition (i.e. it's not the first ever render)
   if(previousPosition = instance.currentPosition){
     // calculate difference between old position and new position and send element here
     var delta = previousPosition - newPosition;
+    // console.log('deta: '+delta)
     $instance.css("top", delta + "px");
   }
 

client/views/posts/posts_list.html

@@ -1,8 +1,8 @@
 <template name="posts_list">
 	<div class="posts grid list">
-		{{#each_with_index posts}}
+		{{#each posts}}
 			{{> post_item}}
-		{{/each_with_index}}
+		{{/each}}
 	</div>
 	<div class="grid more-button {{#if allPostsLoaded}} hidden {{/if}}">
 		<a class="more-link" href="{{loadMoreUrl}}">Load more</a>

client/views/posts/posts_list.js

@@ -1,12 +1,13 @@
 Template.posts_list.helpers({
-  // posts : function () {
-    
-  //   var posts = this.postsList.map(function (post, index, cursor) {
-  //     post._rank = index + 1;
-  //     return post;
-  //   });
-  //   return this.postsList;
-  // },
+  posts : function () {
+    // this.postsList.rewind();    
+    // var posts = this.postsList.map(function (post, index, cursor) {
+    //   post.rank = index;
+    //   return post;
+    // });
+    // return posts;
+    return this.postsList;
+  },
   allPostsLoaded: function(){
     return false;
     // TODO: find out when all posts have been loaded