Fix posts navigation slowdown when lots of posts are loaded

refs #6274
- adds `active-link-wrapper` mixin that tracks the `active` state of child links and adds/removes a `.active` class on the mixed-in element
- removes the passed-in `active` attribute on `gh-posts-list-item` component that forced every item in the content list to be re-rendered each time the currently selected post changed
This commit is contained in:
Kevin Ansfield 2016-01-04 16:50:18 +00:00
parent 58e32f6774
commit ea3bf21a84
3 changed files with 36 additions and 4 deletions

View File

@ -1,14 +1,14 @@
import Ember from 'ember';
import ActiveLinkWrapper from 'ghost/mixins/active-link-wrapper';
const {$, Component, computed, inject} = Ember;
const {alias, equal} = computed;
export default Component.extend({
export default Component.extend(ActiveLinkWrapper, {
tagName: 'li',
classNameBindings: ['active', 'isFeatured:featured', 'isPage:page'],
classNameBindings: ['isFeatured:featured', 'isPage:page'],
post: null,
active: false,
previewIsHidden: false,
isFeatured: alias('post.featured'),

View File

@ -0,0 +1,32 @@
// logic borrowed from https://github.com/alexspeller/ember-cli-active-link-wrapper/blob/master/addon/components/active-link.js
import Ember from 'ember';
const {computed, run} = Ember;
const emberA = Ember.A;
export default Ember.Mixin.create({
classNameBindings: ['active'],
childLinkViews: [],
active: computed('childLinkViews.@each.active', function () {
return emberA(this.get('childLinkViews')).isAny('active');
}),
didRender() {
this._super(...arguments);
run.schedule('afterRender', this, function () {
let childLinkElements = this.$('a.ember-view');
let childLinkViews = childLinkElements.toArray().map((view) =>
this._viewRegistry[view.id]
);
this.set('childLinkViews', childLinkViews);
});
}
});

View File

@ -11,7 +11,7 @@
{{#gh-infinite-scroll-box tagName="section" classNames="content-list-content js-content-scrollbox" fetch="loadNextPage"}}
<ol class="posts-list">
{{#each sortedPosts key="id" as |post|}}
{{#gh-posts-list-item post=post active=(is-equal post currentPost) onDoubleClick="openEditor" previewIsHidden=container.previewIsHidden as |component|}}
{{#gh-posts-list-item post=post onDoubleClick="openEditor" previewIsHidden=container.previewIsHidden as |component|}}
{{#link-to component.viewOrEdit post.id class="permalink" title="Edit this post"}}
<h3 class="entry-title">{{post.title}}</h3>
<section class="entry-meta">