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}}
Using ‘include’ Handlebars helper
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! --}}
Using Handlebars Partials
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!
AEM Environment Relevant Details
- AEM 6.2 SP1
- Handlebars.js v 1.0
- AEM Social Communities:
- CFP 14
- Communities Package cq-socialcommunities-api/1.10.167.50