I’m trying to use a handlebars template in an .hbs file from a custom component (called 'my_custom_component' from here on) inside an AEM social communities .hbs template (an extended version of the ‘/libs/social/forum/components/hbs/topic/list-item.hbs’).
I’ve tried two different approaches: the ‘include’ handlebars helper (https://helpx.adobe.com/experience-manager/6-3/communities/using/handlebars-helpers.html#include) and handlebars partials. Neither are working in my case.
My extended list-item.hbs is included in an extended forum component .hbs in the same manner as it is done in the forum.hbs under libs, except it points to our extended resource type:
{{include this resourceType="my_project_name/components/communities/topic/list-item" template="list-item" bind=false}}
Trying to include my custom component inside our extended list-item template using the ‘include’ helper doesn’t work as I get the following error from line 104 of the social/commons/scf/helpers.js file: “Cannot read property 'model' of undefined”.
I’m including it like so:
{{!-- Inclusion in extended list-item.hbs --}}
{{include this resourceType='my_project_name/components/communities/my_custom_component'}}
{{!-— Fails! --}}
The helper appears to fail because it can’t find a parentView object from the context of my included custom component:
// helpers.js: parentView is undefined here
if (parentView.model.get("resourceType") === resourceType && parentView.model.id === id)
I can include this custom component without issue via the include helper in other .hbs files such as the topic and post ‘toolbar.hbs’ as shown below, so I know the component and it’s .hbs itself work:
{{!-- Inclusion in extended toolbar.hbs --}}
{{include this resourceType='my_project_name/components/communities/my_custom_component'}}
{{!—- Works! --}}
I’ve therefore tried using a ‘partial’ as described in the Handlebars.java docs as well as the Handlebars.js docs below:
After attempting to implement the partial a few different ways as shown below, I get the following error and the page doesn’t load:
{{!-- Partial in extended list-item.hbs --}}
{{> my_custom_component }}
{{!-— also tried: --}}
{{> /apps/my_project_name/components/communities/my_custom_component/my_custom_component.hbs }}
{{!-— Gives the following server side error --}}
org.apache.sling.api.SlingException: Cannot get DefaultSlingScript: /libs/social/console/components/hbs/rightcolumncontent/rightcolumncontent.hbs:6:18: org.apache.sling.api.scripting.ScriptEvaluationException:
org.apache.sling.scripting.sightly.SightlyException:
org.apache.sling.api.SlingException: Cannot get DefaultSlingScript: /apps/my_project_name /components/communities/ topic /list-item.hbs:20:14:
The partial '/apps/my_project_name/components/communities/ my_custom_component /my_custom_component.hbs' at '/ my_custom_component.hbs' could not be found
I’ve verified the .hbs file exists at the location shown in the error via CRX, and at any rate, the same component .hbs can be found and included elsewhere. It isn’t a dispatcher related issue as this is occurring on a local dev AEM publish instance that doesn’t have dispatcher running.
So my question is, given my roadblocks with partials and includes, how can I include my custom component inside the list-item.hbs? Are nested includes and/or partials not supported in this case or am I missing something in my implementation?
Any help is greatly appreciated!
Views
Replies
Total Likes
hi
can you attach your scf component code (both client as well as server side) here. Using partials is not supported for SCF component includes.
Views
Replies
Total Likes
Hi Ashok,
Unfortunately I'm not able to attach my code here (company policy) but I can open a DayCare ticket and put more details there, if needed. I think I explain a bit better below, however.
Essentially I'm trying to include a component in the forum list-item.hbs template using the Adobe SCF Handlebars helper 'include.'
I've tried to include a component in the list-item.hbs a many different ways - including trying partials - and none have worked:
{{include this.id path="comments" resourceType="social/commons/components/hbs/comments"}}
{{!-- and --}}
{{include this path="comments" resourceType="social/commons/components/hbs/comments"}}
Here's a broad outline of the component structure we currently have (indentation implies an included/nested component or template) :
Its that 3rd bullet point/step which fails as shown in my original post: “Cannot read property 'model' of undefined”. (line 104 of the social/commons/scf/helpers.js).
Dynamic inclusion of the comments or other includable components works in other component templates like the topic toolbar.hbs so I'm unclear why it doesn't work inside the list-item.hbs, which, besides this issue is working well.
Are dynamically included components/templates not able to include other components/templates?
Is there another way to include a template in an included template?
Thanks!
Views
Replies
Total Likes
Views
Like
Replies
Views
Likes
Replies