AEM Social Communities Handlebars 'include' helper and 'partial' issues

[jonathane272096]

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:

• Handlebars.js Partials Docs: https://handlebarsjs.com/partials.html
• Handlebars.java Partials Docs: http://jknack.github.io/handlebars.java/reuse.html

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

[apanghal]

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.

[jonathane272096]

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) :

• Extended social/forum/components/hbs/forum which includes as a template...
  • ...An extended social/forum/components/hbs/topic/list-item.hbs which attempts to include...
    • ...social/commons/components/hbs/comments or other dynamically includable component (fails)

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!