How to pass the data in AEM? Syntax Error!

[Ameen_Dev]

Actually, I am trying to pass the data in order to make the modal popup work. Here I am getting the modal popup through experience fragments. 

First I created a template to show the modal popup. And I am passing the modal ID to match the experience fragment modal ID.  The code is given below

<template data-sly-template.mainbutton="${ @ properties}">
    <sly>
        <div data-sly-test="${properties.modalFragmentPath}" class="${properties.modalBehavior == 'fullOverlay' ? 'fullscreen-overlay-wrap overlay-modal' : ''}" id="${properties.modalId}">
            <sly data-sly-resource="${properties.modalFragmentPath}"></sly>
        </div>
    </sly>    
</template>

Second I am calling the created template on the main HTML to show the modal popup. And the code is given below.

<sly data-sly-use.templates="core/wcm/components/commons/v1/templates.html"></sly>
<sly data-sly-set.totalItems="${0}"></sly>
<sly data-sly-list.child="${resource.listChildren}">
    <sly data-sly-list.itemchildren="${child.listChildren}">
        <sly data-sly-set.totalItems="${itemchildrenList.count}"></sly>
    </sly>
</sly>
<div class="slider-module-wrap ${properties.bgType == 'withBackground' ? 'has-bg' : ''}">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-md-6">
                <div class="card-left">
                    <div class="slider-wrap desktop">
                        <div class="slider-content">
                            <div class="input-wrap">
                                <input type="range" class="range-input" name="packageInputName" id="packageInputId"
                                    step="1" value="" min="1" max="${totalItems}"
                                    oninput="packageOutputId.value = packageInputId.value">
                            </div>
                        </div>
                        <ul class="range-data">
                            <sly data-sly-list.slider="${resource.getChildren}">
                                <li data-sly-repeat.item="${slider.getChildren}">
									<span class="more-info-link" data-more-info="#" data-label="${item.modalId}"></span>
                                </li>
                            </sly>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="card-right">
                    <div class="data-card-wrapper">
                        <div id="data-card-inner" class="data-card-inner">
                            <div class="data-card-body">
                                <div class="package-wrap third">
                                    <div class="more-info-wrap">
                                        <a 
                                            id="more-info" class="overlay-link"
                                            href="#" data-label="overlay">
                                            <div class="more-title">More Info</div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<sly data-sly-use.mainbtntemplate="/apps/components/nwt-smb/common/dialog/moreinfobutton/moreinfobutton.html"
data-sly-call="${mainbtntemplate.mainbutton @ properties=item}">
</sly>
<sly data-sly-call="${templates.placeholder @ isEmpty = wcmmode.edit}" />

Now, the problem is I am not able to pass the data perfectly to make the popup work. The issue is from the template which I created. Modal ID is not showing on the experience fragment. I don't know where I made the mistake. 

I would really appreciate it If someone helps me to solve this.

[pradeepmoolemane]

Hi @Ameen_Dev 

Can you please try changing item (data-label attribute value which marked in bold in below snippet) to properties ?

<template data-sly-template.mainbutton="${ @ properties}">
<sly>
<span class="more-info-link" data-more-info="#" data-label="${item.modalId}">
</span>
<div data-sly-test="${properties.modalFragmentPath}" class="${properties.modalBehavior == 'fullOverlay' ? 'fullscreen-overlay-wrap overlay-modal' : ''}"
id="${properties.modalId}">
<sly data-sly-resource="${properties.modalFragmentPath}">
</sly>
</div>
</sly>
</template>

[Ameen_Dev]

My apology, there will not be a span class inside template. I have edited the code. And by the way, I have tried that method too. It's not working.

[B_Sravan]

Seems like your input value to the template i.e is not within the scope of sly.
can you paste your code as a snippet? (so that I can copy and take look on my IDE) also please use relative path while calling you template and make use of sling models to list out the children of your resource to maintain best practices.

I have an example, 
component html:

<sly data-sly-use.tiles="com.someprojecr.core.models.ArticleTile"
     data-sly-use.templates="core/wcm/components/commons/v1/templates.html">
    <sly data-sly-test.tileType="${tiles.tileType=='singletile'}" data-sly-use.singleTile="templates/single-tile.html">
        <div data-sly-call="${singleTile.singleTile @ tileData=tiles}"></div>
    </sly>
</sly>
<sly data-sly-call="${templates.placeholder @ isEmpty = !tiles.articleTiles && !tiles.tileType, classAppend='cmp-article-tiles', emptyTextAppend='Please check Article Tiles Configurations'}"></sly>

 Template:

<template data-sly-template.crosslink="${ @ tileData}">
    <div class="article-listing crosslink-tile" data-sly-list="${tileData.articleTiles}">
        <div class="cmp-article-listing" >
            <div class="cmp-article-listing__content">
                <div class="cmp-article-listing__category" data-sly-test="${item.artCategory}">${item.artCategory}</div>
                <h2 class="cmp-article-listing__title" data-sly-test="${item.artTitle}"><a href="${item.artPath @context ='uri'}">${item.artTitle @context='html'}</a></h2>
                <div class="cmp-article-listing__description" data-sly-test="${item.artDescription}">
                    <p>${item.artDescription @context ='html'}</p>
                </div>
                <div class="cmp-article-listing__time" data-sly-test="${item.artTime}">${item.artTime @context ='html'}</div>
            </div>
        </div>
    </div>
</template>

[Manu_Mathew_ · Accepted solution]

@Ameen_Dev  looks like the "item" variable used has lost its scope, you will need to find a way to use it in correct scope, or pass the list var and iterate inside the template.

[Ameen_Dev]

Thanks @Manu_Mathew_!

Actually, I didn't iterate inside the template but in the main HTML and included the template in the right place. Thanks for giving me the light.