Search code examples
aemsightlyhtl

Is there a pattern for grouping templates via includes?


I'm creating a new project, and I'd like to namespace a few of my helpers for sightly. These helpers are "template.html files". I'm currently calling them with the normal pattern of:

<sly data-sly-use.MyHelper='MyHelper.html' data-sly-call="${MyHelper.tmpl @ args..}"/>

What I'm appreciating about Sightly is the fact that I can do something like this:


templates.html

<template data-sly-template.one>1</template>
<template data-sly-template.two>2</template>

main.html

<sly data-sly-use.tmpls="templates.html"/>

one: <sly data-sly-call=${tmpls.one}/>
two <sly data-sly-call=${tmpls.two}/>

What I would like to set up is:

library.html (includes more modular template functionality)

<sly data-sly-import="one.html"/>
<sly data-sly-import="two.html"/>

main.html (imports library)

<sly data-sly-use.libs="library.html"/>

one: <sly data-sly-call=${libs.one}/>
two <sly data-sly-call=${libs.two}/>

I have tried a couple variations of the latter to see if there was already something OTTB that's supported. Perhaps I was just hooking it up incorrectly, but does anyone know if this is possible?

thank you,

Brodie


Solution

  • From the HTL Spec:

    When templates are located in a separate file, they can be loaded with data-sly-use

    You are already doing this in your working example with data-sly-use and data-sly-call in your main.html to the data-sly-template in your template.html. You just need to do it one more time in your library.html.

    main.html (imports library)

    <sly data-sly-use.libs="library.html"/>
    
    one: <sly data-sly-call=${libs.one}/>
    two <sly data-sly-call=${libs.two}/>
    

    library.html (includes more modular template functionality)

    <template data-sly-template.one>
        <div data-sly-use.one="one.html" data-sly-call="${one.one}"></div>
    </template>
    
    <template data-sly-template.two">
        <div data-sly-use.two="two.html" data-sly-call="${two.two}"></div>
    </template>
    

    one.html

    <template data-sly-template.one>this is one</template>
    

    two.html

    <template data-sly-template.two>this is two</template>
    

    This will allow you to import all your helpers via one data-sly-use expression while keeping your helper templates in separate files just as you asked for, even if the intermediary library.html isn't as succinct as you probably wanted.