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
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.
Related
What is the difference between to use:
<div data-sly-resource="${'foo' # resourceType="var"} ... ></div>
or
<sly data-sly-resource="${'foo' # resourceType="var"} ... ></sly>
or
<sly data-sly-resource="${'foo' # resourceType="var"} ... />
And when I should use data-sly-unwrap?
I think the best way to understand when to use what, is to understand the fundamentals of HTL.
Most of HTL can be written around existing HTML tags and attributes, such as
<div data-sly-resource="${'foo' # resourceType='var'}" ... ></div>
However, in instances where you don't want the HTML element to be present in the output, you can leverage the sly element. When an sly element is used it is removed from the final rendered HTML automatically.
For e.g.,
<sly data-sly-resource="${'foo' # resourceType='var'}" ... ></sly>
or
<sly data-sly-resource="${'foo' # resourceType='var'}" ... /> both output the same HTML which is directly including the output of the resource foo without adding any extra tags.
But if the same was written using an HTML element such as the following
<div data-sly-resource="${'foo' # resourceType=""var}" ... ></div>
the generated HTML will contain a parent div tag around the included resource's output as shown below
<div>HTML output of foo goes here</div>
The data-sly-unwrap comes into play in such scenarios. Adding the data-sly-unwrap to an HTML element will exclude that element from the generated output, but would output all the child HTML.
For e.g., <div data-sly-resource="${'foo' # resourceType='var'}" ... data-sly-unwrap></div> and <sly data-sly-resource="${'foo' # resourceType='var'}"></sly> and <sly data-sly-resource="${'foo' # resourceType='var'}" /> would produce the same output.
Please note that the data-sly-unwrap on a sly element has no effect as the sly is removed by the processor anyways.
However, I think the power of data-sly-unwrap lies when using it with conditional statements.
For e.g., if a parent element needs to present only in certain scenarios, then using it in the following way is much cleaner than writing multiple if conditions as we used to do in JSPs or JSTLs.
<div class="parent" data-sly-unwrap="${hideParent}">
<img class="img" src="../../xyz.jpg" />
</div>
More on data-sly-unwrap here.
I want to figure out a way to insert HTML inside a <sly data-sly-resource> tag and be able to go inside the component I am retrieving from the resource attribute.
To compare, it would be something like Vue's slots, and React's { this.props.children }.
Example:
Parent Component
<sly data-sly-resource="${'example' # resourceType='path/to/component/structure/example'}">
<h1>Hello World</h1>
</sly>
Example Component
<div id="example-component">
${ variable.getChildrenHTMLCall() } // Does something like this exist?
</div>
Output
<div id="example-component">
<h1>Hello World</h1>
</div>
This functionality does not exist.
You could make a similar functionality by using data-sly-template. But you’d have to pass the HTML sting as a parameter (more specifically option) but that might not be desired or maintainable.
You could use the com.day.cq.contentsync.handler.util.RequestResponseFactory as seen here: http://www.nateyolles.com/blog/2015/10/get-rendered-html-for-an-aem-resource-or-component
I want to use x3dom together with my PolymerElements, but if I put the needed x3d tag inside my Polymer.Element, X3Dom states, that no containers are found, because it uses document.getElementsByTagName('X3D');
see here: https://github.com/x3dom/x3dom/blob/652f3d4acd5e9e9f62b3ecdd92dec5e5c8a2fd86/src/Main.js#L25
Is there a way to make dom elements 'public' so that they can be found by libraries like x3dom?
P.S.: A working solution I found is by 'slotting' the element through to the actual destination.
Example:
<body>
<my-custom-element>
<x3d ...> ... </x3d>
</my-customelement>
<script src="x3dom-full.js">
</body>
Works, if I design my Element like this:
<dom-module id="my-custom-element">
<template>
<style></style>
<slot></slot>
</template>
</dom-module>
In case I design my element like this:
<dom-module id="my-custom-element">
<template>
<style></style>
<x3d></x3d>
</template>
</dom-module>
x3dom cannot find it, even if the script tag for x3dom-full.js lies inside the template tag.
The reason I do not prefer the slot tags is that I want to hide the x3dom functionality inside my custom element.
I have plain use class which contains one method that returns complex bean with a lot of setters/getters. Lets name it SomeUse. Given sightly file:
<sly data-sly-use.someUse="com.mycompany.SomeUse">
${someUse.data.firstProperty}
<div>
${someUse.data.secondProperty}
</div>
<!-- ...and so on -->
</sly>
So the point is I don't want to look at someUse.data getting. Instead of it I would do something like this:
<sly data-sly-use.someUse="com.mycompany.SomeUse" data-sly-use.data=${someUse.data}>
${data.firstProperty}
<div>
${data.secondProperty}
</div>
<!-- ...and so on -->
</sly>
I can't do this way though. Is there any alternative to achieve such result? Thanks a lot!
So the answer is to:
<sly data-sly-test.varName="${data.firstProperty}"></sly>
<div> ${varName.secondProperty} </div>
Creating a variable through empty data-sly-test attribute make it accessible after a tag.
You can set variables for use in a WCMUse class with the following syntax:
<sly data-sly-use.someUse="${ 'com.mycompany.SomeUse' # page=currentPage }">
and retrieve the page variable from your WCMUse class's activate() method like this:
Page page = get("page", Page.class);
For a working example, check out this Sightly script and this WCMUse class.
Instead of data-sly-use.data=${someUse.data}
use data-sly-test.data="${someUse.data}".
Then you will be able to get the property like
${data.firstProperty}
<div>
${data.secondProperty}
</div>
You can also set in DOM elements
<div id="elementId" data-sly-test.vehicle="${model.vehicle}">
<p>${vehicle.name}</p>
<p>${vehicle.type}</p>
</div>
I have the following html:
<div >${'foo' # i18n}</div>
In my i18n file I have the following:
<foo
jcr:mixinTypes="[sling:Message]"
jcr:primaryType="sling:MessageEntry"
sling:key="foo"
sling:message="This is dummy text"/>
This is dummy text is displayed in the page. well so far. The problem is that foo is a variable which comes form other template and I read as follow:
${fooValue} //this returns foo
Now to read message from the i18n I tried the following:
<div>${'${fooValue}' # i18n} </div>
but This displays ${fooValue} in the page. How to read message from the i18n, if I have variable key?
You could use a local template to which you pass the variable identifying your key for the i18n dictionary:
<template data-sly-template.locale="${# key}">
${key # i18n, locale='de'}
</template>
<div data-sly-call="${locale # key='world'}"></div>
Assuming your i18n dictionary has the translation, the output would be:
<div>
Welt
</div>
You can also call the locale template from another template in your page:
<template data-sly-template.locale="${# key}">
${key # i18n, locale='de'}
</template>
<template data-sly-template.translate="${# string}">
<div data-sly-call="${locale # key=string}" data-sly-unwrap></div>
</template>
<div data-sly-call="${translate # string='world'}"></div>
The output would be the same as above.
The solution by Radu works wonderfully. I have also tried this and this works too, if anyone is looking for a solution without involving templates.
<div>${fooValue # i18n}</div>
I personally would go with templates though. Makes it a little easier to read.
<div>${fooValue # i18n}</div> vs <div data-sly-call="${translate # string=fooValue}"></div>.