template.html
<sly data-sly-use.logic="logic.js">
<h1>${logic.pageTitle}</h1>
</sly>
logic.js
use(function () {
var page = pageManager.getPage('/content/we-retail/us/en');
var pageTitle = page.getPageTitle() || page.getTitle() || 'untitled';
return {
page: page,
pageTitle: pageTitle
};
});
template.html
<sly data-sly-use.logic="logic.js" data-sly-use.title="${logic.title.path}">
<h1>${title.jcr:title}</h1>
</sly>
logic.js
use(function () {
var page = pageManager.getPage('/content/we-retail/us/en');
var title = page.getContentResource('root/responsivegrid/section_title');
return {
page: page,
title: title
};
});
template.html
<sly data-sly-use.logic="logic.js">
<sly data-sly-resource="${logic.title.path}"></sly>
</sly>
logic.js
use(function () {
var page = pageManager.getPage('/content/we-retail/us/en');
var title = page.getContentResource('root/responsivegrid/section_title');
return {
page: page,
title: title
};
});
template.html
<sly data-sly-template.listChildren="${@ page}">
<ul data-sly-list.child="${page.listChildren}">
<li>
<span data-sly-use.pageTitle="${'getPageTitle.js' @ page=child}">
${child.title}
</span>
<sly data-sly-call="${listChildren @ page=child}"></sly>
</li>
</ul>
</sly>
<sly data-sly-use.logic="logic.js">
<h1 data-sly-use.pageTitle="${'getPageTitle.js' @ page=logic.page}">${pageTitle}</h1>
<sly data-sly-call="${listChildren @ page=logic.page}"></sly>
</sly>
logic.js
use(function () {
var page = pageManager.getPage('/content/we-retail/us/en');
var title = page.getContentResource('root/responsivegrid/section_title');
return {
page: page,
title: title
};
});
getPageTitle.js
use(function () {
return this.page.getPageTitle() || this.page.getTitle() || 'untitled';
});
template.html
<sly data-sly-use.logic="logic.js">
<h1 data-sly-use.pageTitle="${'getPageTitle.js' @ page=logic.page}">${pageTitle}</h1>
<ul data-sly-list.child="${logic.children}">
<li data-sly-resource="${child}"></li>
</ul>
</sly>
logic.js
use(function () {
var page = pageManager.getPage('/content/we-retail/us/en');
var childrenIterator = page.listChildren();
var children = [];
while (childrenIterator.hasNext()) {
var child = childrenIterator.next();
children.push({
"jcr:title": child.getPageTitle() || child.getTitle() || 'untitled',
"type": "H2",
"sling:resourceType": "core/wcm/components/title/v1/title",
"resourceName": "title"
})
}
return {
page: page,
children: children
};
});
template.html
<sly data-sly-template.listChildren="${@ page}"
data-sly-use.children="${'listChildren.js' @ page=page}">
<ul data-sly-list.child="${children}">
<li>
<sly data-sly-resource="${child.syntheticTitle}"></sly>
<sly data-sly-call="${listChildren @ page=child.page}"></sly>
</li>
</ul>
</sly>
<sly data-sly-use.logic="logic.js">
<h1 data-sly-use.pageTitle="${'getPageTitle.js' @ page=logic.page}">${pageTitle}</h1>
<sly data-sly-call="${listChildren @ page=logic.page}"></sly>
</sly>
logic.js
use(function () {
var page = pageManager.getPage('/content/we-retail/us/en');
return {
page: page
};
});
listChildren.js
use(function () {
var childrenIterator = this.page.listChildren();
var children = [];
while (childrenIterator.hasNext()) {
var child = childrenIterator.next();
children.push({
"page": child,
"syntheticTitle": {
"jcr:title": child.getPageTitle() || child.getTitle() || 'untitled',
"type": "H2",
"sling:resourceType": "core/wcm/components/title/v1/title",
"resourceName": "title"
}
})
}
return children;
});
template.html
<sly data-sly-template.card="${@ img, title, content}">
<div class="card">
<img src="${img}" alt/>
<h2>${title}</h2>
<div class="content" data-sly-test="${content}" data-sly-call="${content}"></div>
</div>
</sly>
<sly data-sly-template.example>
<p>This example shows how to pass markup to a template</p>
</sly>
<sly data-sly-call="${card @ img='hello.jpg', title='Hello World', content=example}"></sly>
template.html
<sly data-sly-use.logic="logic.js">
<sly data-sly-resource="${'title' @ resourceType='repl/components/title', requestAttributes=logic.attributes}"></sly>
</sly>
logic.js
use(function () {
//var page = pageManager.getPage('/content/we-retail/us/en');
var attributes = new Packages.java.util.HaashMap();
attributes.put("title", "Hello World");
attributes.put("description", "Lorem ipsum…");
return {
attributes: attributes
};
});
/apps/repl/components/title/title.html
<div class="title" data-sly-use.logic="title.js">
<h2>${logic.title}</h2>
<p data-sly-test="${logic.description}">
${logic.description}
</p>
</div>
/apps/repl/components/title/title.js
use(function () {
return {
"title": request.getAttribute('title'),
"description": request.getAttribute('description')
};
});
template.html
<script id="card-template" type="text/x-handlebars-template"
data-sly-include="card-template.html"></script>
card-template.js
<div class="card ${'card--test'}" data-sly-test="${true}">
<img src="{{img}}" alt/>
<h2>{{title}}</h2>
</div>