Rendring code in html template sightly

[Former Community Member]

Hi All,

Good evening!!!

Need small help on sighlty,

Created one component with below content and have to render layout based on selector as layout3, actually layout3 is objevalue.

<div data-sly-use.myObj="Test">
    <ul data-sly-list.keyName="${myObj.name}">

       <div data-sly-test.objvalue=${keyName} data-sly-unwrap/>

           <div  data-sly-resource="${objvalue @ resourceType='testing12/components/layout', selectors='layout3', wcmmode='disabled' }" data-sly-unwrap>
    </ul>
</div>

So layout3 component should be executed with below content but is the object is not rendering in layout3.

<li>KEY: ${keyName}, VALUE: ${myObj.name[keyName]}</li>

It is working fine if put code in one component  with out selector.

Thanks in advance.

Nani.

[smacdonald2008]

check the HTL spec - it talks about use of selectors:

https://github.com/Adobe-Marketing-Cloud/htl-spec/blob/master/SPECIFICATION.md

[kautuk_sahni]

Please have a look at this post, 

Link:- http://stackoverflow.com/questions/28571842/display-different-markup-in-sightly-based-on-a-sling-sel...

//Display different markup in HTML Template Language (HTL formerly known as Sightly) based on a Sling selector

Also Refer to the documentation here :-

Link:- https://docs.adobe.com/docs/en/htl/docs/block-statements.html (Search for Selector)

//

    Add (or replace) a selector:

     <article data-sly-resource="${'path/to/resource' @ selectors='selector'}"></article>
    Code samples are intended for illustration purposes only.

    Add, replace or remove multiple selectors:

     <article data-sly-resource="${'path/to/resource' @ selectors=['s1', 's2']}"></article>
    Code samples are intended for illustration purposes only.

    Add a selector to the existing ones:

     <article data-sly-resource="${'path/to/resource' @ addSelectors='selector'}"></article>
    Code samples are intended for illustration purposes only.

    Remove some selectors from the existing ones:

     <article data-sly-resource="${'path/to/resource' @ removeSelectors='selector1'}"></article>
    Code samples are intended for illustration purposes only.

    Remove all selectors:

     <article data-sly-resource="${'path/to/resource' @ removeSelectors}"></article>

I hope this would help you.

Thanks and Regards

Kautuk Sahni

[antoniom5495929]

Before calling the other component with selectors try to define a template:

<template data-sly-template.objectValue="${@ key, value}">