FIX: Errors with summary views and placeholders

app/assets/javascripts/discourse/controllers/topic.js.es6

@@ -710,6 +710,7 @@ export default Ember.Controller.extend(SelectedPostsCount, BufferedContent, {
     const postStream = this.get('model.postStream');
     const lastLoadedPost = postStream.get('posts.lastObject');
 
+    console.log(postStream.progressIndexOfPost(post));
     this.set('controllers.topic-progress.progressPosition', postStream.progressIndexOfPost(post));
 
     if (lastLoadedPost && lastLoadedPost === post) {

app/assets/javascripts/discourse/models/post-stream.js.es6

@@ -669,8 +669,11 @@ export default RestModel.extend({
 
   updateFromJson(postStreamData) {
     const posts = this.get('posts');
-
     posts.clear();
+
+    const postsWithPlaceholders = this.get('postsWithPlaceholders');
+    postsWithPlaceholders.clear();
+
     this.set('gaps', null);
     if (postStreamData) {
       // Load posts if present

app/assets/javascripts/discourse/views/cloaked-collection.js.es6

@@ -2,11 +2,12 @@
 const CloakedCollectionView = Ember.CollectionView.extend({
   cloakView: Ember.computed.alias('itemViewClass'),
   topVisible: null,
-  bottomVisible: null,
   offsetFixedTopElement: null,
   offsetFixedBottomElement: null,
   loadingHTML: 'Loading...',
   scrollDebounce: 10,
+  _topVisible: null,
+  _bottomVisible: null,
 
   init() {
     const cloakView = this.get('cloakView'),
@@ -17,6 +18,7 @@ const CloakedCollectionView = Ember.CollectionView.extend({
     const slackRatio = parseFloat(this.get('slackRatio'));
     if (!slackRatio) { this.set('slackRatio', 1.0); }
 
+
     const CloakedView = this.container.lookupFactory('view:cloaked');
     this.set('itemViewClass', CloakedView.extend({
       classNames: [cloakView + '-cloak'],
@@ -42,28 +44,6 @@ const CloakedCollectionView = Ember.CollectionView.extend({
     Ember.run.next(this, 'scrolled');
   },
 
-  /**
-    If the topmost visible view changed, we will notify the controller if it has an appropriate hook.
-
-    @method _topVisibleChanged
-    @observes topVisible
-  **/
-  _topVisibleChanged: function() {
-    const controller = this.get('controller');
-    if (controller.topVisibleChanged) { controller.topVisibleChanged(this.get('topVisible')); }
-  }.observes('topVisible'),
-
-  /**
-    If the bottommost visible view changed, we will notify the controller if it has an appropriate hook.
-
-    @method _bottomVisible
-    @observes bottomVisible
-  **/
-  _bottomVisible: function() {
-    const controller = this.get('controller');
-    if (controller.bottomVisibleChanged) { controller.bottomVisibleChanged(this.get('bottomVisible')); }
-  }.observes('bottomVisible'),
-
   /**
     Binary search for finding the topmost view on screen.
 
@@ -140,6 +120,7 @@ const CloakedCollectionView = Ember.CollectionView.extend({
     // Find the bottom view and what's onscreen
     let bottomView = topView;
     let bottomVisible = null;
+    const controller = this.get('controller');
     while (bottomView < childViews.length) {
       const view = childViews[bottomView];
       const $view = view.$();
@@ -168,19 +149,31 @@ const CloakedCollectionView = Ember.CollectionView.extend({
     }
     if (bottomView >= childViews.length) { bottomView = childViews.length - 1; }
 
+    let topVisible = onscreen[0];
+
     // If our controller has a `sawObjects` method, pass the on screen objects to it.
-    const controller = this.get('controller');
     if (onscreen.length) {
-      this.setProperties({topVisible: onscreen[0], bottomVisible });
+      this.setProperties({topVisible, bottomVisible });
       if (controller && controller.sawObjects) {
         Em.run.schedule('afterRender', function() {
           controller.sawObjects(onscreen);
         });
       }
     } else {
-      this.setProperties({topVisible: null, bottomVisible: null});
+      bottomVisible = topVisible = null;
     }
 
+    if (topVisible !== this._topVisible && controller.topVisibleChanged) {
+      controller.topVisibleChanged(topVisible);
+    }
+    this._topVisible = topVisible;
+
+    if (bottomVisible !== this._bottomVisible && controller.bottomVisibleChanged) {
+      controller.bottomVisibleChanged(bottomVisible);
+    }
+    this._bottomVisible = bottomVisible;
+
+
     const toCloak = childViews.slice(0, topView).concat(childViews.slice(bottomView+1));
 
     this._uncloak = toUncloak;

app/assets/javascripts/discourse/views/cloaked.js.es6

@@ -97,7 +97,7 @@ export default Ember.View.extend({
         createArgs.context = target;
       }
       if (controller) { createArgs.controller = controller; }
-      this.setProperties({ style: null, loading: false });
+      this.setProperties({ style: ''.htmlSafe(), loading: false });
 
       const cloaks = target && (target instanceof Placeholder) ? target.viewName : this.get('cloaks');
       this.setContainedView(this.createChildView(cloaks, createArgs));

test/javascripts/models/post-stream-test.js.es6

@@ -135,6 +135,7 @@ test('updateFromJson', function() {
   });
 
   equal(postStream.get('posts.length'), 1, 'it loaded the posts');
+  equal(postStream.get('postsWithPlaceholders.length'), 1, 'it loaded the posts');
   containsInstance(postStream.get('posts'), Discourse.Post);
 
   equal(postStream.get('extra_property'), 12);