Render components inside each-loops

[stnbndr]

Hi, is it possible to render components inside an Handlebars each-loop?

For a better understanding I have made this simple example. The code outputs the names correctly (for example 3 times), but the nested component is only rendered once.

componentX.js

let _data = {
    people: [
        "John Kate",
        "Alan Johnson",
        "Charles Hilton"
    ]
};

componentX.html

{{#each people}}
    Name: {{this}} - 
    <x-component src="partials/card" data-name="{{this}}"></x-component>  
{{/each}}

partials/card.html

Hello World!

---

Expected output:

Name: John Kate - Hello World!
Name: Alan Johnson - Hello World!
Name: Charles Hilton - Hello World!

Real output:

Name: John Kate - Hello World!
Name: Alan Johnson -
Name: Charles Hilton -

Output Raw:

Name: John Kate - 
<x-component src="partials/card" data-title="John Kate" data-x-component="partials/card" id="spaCompContainer_partialscard_1" rel="spaComponentContainer_partialscard" data-rendered-component="partials_card">Hello World!</x-component>
Name: Alan Johnson - 
<x-component src="partials/card" data-title="Alan Johnson" data-x-component="partials/card" id="spaCompContainer_partialscard_2" rel="spaComponentContainer_partialscard"></x-component>
Name: Charles Hilton - 
<x-component src="partials/card" data-title="Charles Hilton" data-x-component="partials/card" id="spaCompContainer_partialscard_3" rel="spaComponentContainer_partialscard"></x-component>

Thanks for your suggestions.

[sucom]

Hi @stnbndr, checkout the following solution...

[stnbndr]

Hi @sucom,
thanks for your fast reply and the explanation of the problem. I tested your suggestion and it worked. At least partially 😃.

I use SPA.js in combination with jQuery (because other libraries require it). If I only load the spa-bundle.min.js your solution is working. I guess in this case the spa-dom.js library is used. But if I include jquery.min.js before SPA.js, like described in the docs, it doesn't work anymore. In that case it's again rendert only once. Even if I set the setTimeout() to one second or more.

So I tried to still load jQuery but tell SPA.js not to use it. I've seen there is an option to the body Tag use-jquery to tell SPA.js to use jQuery, but how do I tell NOT to use it? Is this even good practice to load jQuery but then not using it for SPA.js?

Thanks for your help.

[sucom]

Hi @stnbndr,

Thanks for trying it out. I will look into it and get back in a day or two. sorry for the delay.

[sucom]

Hi @stnbndr,

Done. Found the root cause and fixed it. Check out the latest v2.89.1.

You can use jQuery (without a conflict 😊), and no need to render with a delay in the _renderCallback 😊 as mentioned in my earlier solution.

So, use v2.89.1 with jQuery and remove _renderCallback function in the above solution. It should be fine.

Thanks

[stnbndr]

Hello @sucom,
that's awesome 😄 works great 👍! Thanks for the extremely fast and great solution.

[sucom]

Hi @stnbndr,
You're welcome. Happy to help 😊.

Thanks