Infinite foreach loops

Developer help
1

Running a local install of Ghost latest on Mac 15.6.1 and trying to understand why I’m getting this behavior when modifying the Starter-main theme.

The examples below are from the highly simplified code I’ve been using to try to narrow down the problem, which wasn’t happening when I only had six placeholder posts in the DB but cropped up as soon as I imported the couple hundred posts already on the site I’m making a new theme for.

I want to fetch the six most recent posts and loop through them with a test partial named “foo”:

{{#get "posts" limit="6" as |post|}} 
     {{#foreach post }} 
         {{>"foo"}} 
    {{/foreach}} 
{{/get}}

If the contents of foo.hbs are this

foo

I get what I expect

foo foo foo foo foo foo foo

but if the contents of foo.hbs are this

<article class="gh-card {{post_class}}">foo</article>

I get an infinite scroll of this

<article class="gh-card post">foo</article>
<article class="gh-card post">foo</article>
<article class="gh-card post">foo</article>
<article class="gh-card post">foo</article>
<article class="gh-card post">foo</article>
<article class="gh-card post">foo</article>
<article class="gh-card post">foo</article>
<article class="gh-card post">foo</article>
<article class="gh-card post">foo</article>
<article class="gh-card post">foo</article>
<article class="gh-card post">foo</article>
<article class="gh-card post">foo</article>
<article class="gh-card post">foo</article>
<article class="gh-card post">foo</article>
...

I have tried every variation of #get, #foreach, and #posts I could think of and except for the ones that failed outright they all showed the same behavior.

Removing the {{post class}} attribute, or even moving it to be the content of the element makes the behavior stop. Putting another attribute, such as {{author}} as a value of the “class” attribute does not cause the behavior, although it’s also not returning a value even when I add include=“authors” to the #get.

If anyone could explain this one to me, I’d really appreciate it because I’m about to tear out what hair I have left over it.

2

I’m going to take a guess that you’ve got infinite scroll in this theme. If you look at the source of the page (ctrl-U) I’m betting you see six posts.

Infinite scroll is JavaScript - it loads what’s at /page/2 and appends it, then /page/3 and so on. You didn’t see it until you had a structure that matched what this JavaScript is looking for.

3

Yeah, I’m assuming there’s infinite scroll in the JS somewhere too. I’ve tried turning it off by putting

<script>window.infinite_scroll = false</script>

in the head section of default.hbs but that didn’t turn it off. I can’t remember which search lead me to that but it was for the Casper theme. I haven’t come across any other version for Starter-main.

But regardless of that, what insane person would write an infinite scroll script that mindlessly repeats the same things over and over? If I use limit=”1” I get a single post that loads an infinite number of times to fill the page.

4

Although I wish I could more easily just turn it off as something I don’t want in this theme at all, you did get me looking into the infinite scroll implementation more. And that let me to this page, where I found this:

There’s some JS in Casper that generates the infinite scroll. So long as your posts are wrapped in the paginated feed of all posts will keep loading.

The equivalent class name in Starter-main is “ga-postfeed.” I changed that class name in the hbs file (and CSS) and now I’m getting the behavior I want. It kind of seems that this is the kind of information that should be included with any distributed theme, especially one described as a starter.

5

Feel free to file a PR on the starter repo! :slight_smile: