AEM学习：Sightly（四）

一，data-sly-use

<sly data-sly-use.url1="${ '/apps/demo/components/content/demo-component/utils/LinkUtils.js' @ link=properties.linkURL}" />     

LinkUtils.js

use(function() {
	'use strict'
	try {
		if (this.link) {
			if(this.link.indexOf('http:') > -1 || this.link.indexOf('https:') > -1){
				return this.link;
			} else {
                return this.link + '.html';
			}
		}
	} catch (e) {
	}
});

二，data-sly-test

<h1 data-sly-test="${properties.jcr:title}">
	${properties.jcr:title}
</h1>

三，data-sly-list

<dl data-sly-list="${currentPage.listChildren}">
    <dt>index: ${itemList.index}</dt>
    <dd>value: ${item.title}</dd>
</dl>

item: The current item in the iteration.
itemList: Object holding the following properties:
    index: zero-based counter (0..length-1).
    count: one-based counter (1..length).
    first: true if the current item is the first item.
    middle: true if the current item is neither the first nor the last item.
    last: true if the current item is the last item.
    odd: true if index is odd.
    even: true if index is even.

四，data-sly-resource

<sly data-sly-resource="${ @path='item1', resourceType='/apps/demo/components/content/how-to/list-item' }"></sly>

<div data-sly-resource="${ @path='par', resourceType='foundation/components/parsys'}"></div>

五，data-sly-include

<sly data-sly-include="header.html"/>
<sly data-sly-include="customheaderlibs.html"/>
<div data-sly-include="content.html" data-sly-unwrap></div>
<sly data-sly-include="footer.html"/>
<sly data-sly-include="customfooterlibs.html"/>

六，data-sly-unwrap

<div class="popup" data-sly-unwrap="${isPopup}">content</div>

七，${}

${properties.text @ context='text'}
${properties.text @ context='html'}
${properties.text @ context='uri'}
${properties.text @ context='number'}
${properties.text @ context='unsafe'}
${properties.text @ context='scriptString'}
${properties.text @ context='styleString'}