23、HTL Sightly （二）data-sly-template data-sly-call

本文主要是介绍23、HTL Sightly （二）data-sly-template data-sly-call，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

23、HTL Sightly （二）data-sly-template & data-sly-call
- data-sly-template
- data-sly-call

23、HTL Sightly （二）data-sly-template & data-sly-call

data-sly-template语句可以将一些特定的组件展示方式作为一个模板来使用，这样可以使得页面结构简洁清晰。

data-sly-template

在htlsightly组件目录下创建模板文件booksTemplate.html

data-sly-template.templateBooks：将模板元素定义为templateBooks
@ books：表示需要传入books参数

<div data-sly-template.templateBooks="${@ books}"><div data-sly-list.book="${books}"><p>Book Name : <b>${book.name}</b></p><p>Book Price : <b>${book.price}</b></p><p>---------------------------</p></div>
</div>

在htlsightly组件中引入模板，从倒数第五行开始为引入template语法

data-sly-use.booksTemplate：使用模板元素booksTemplate
@ books：将model中的books集合以参数形式传递给模板中的templateBooks元素

<div class="cq-placeholder cmp-title" data-emptytext="${component.title}:Click to configure" data-sly-unwrap="${!wcmmode.edit}"></div><sly data-sly-use.model="com.adobe.aem.guides.wknd.core.models.HTLSightly"><h1>==== data-sly-list =====</h1><div  class="list" data-sly-list.book="${model.books @ begin = 0, step=2, end = 2}"><h1>下标：${bookList.index}</h1><h1>序号：${bookList.count}</h1><h2>书名：${book.name}</h2><h2>价格：${book.price}</h2></div><h1>==== data-sly-repeat =====</h1><div class="repeat" data-sly-repeat.book="${model.books}"><h1>下标：${bookList.index}, 序号：${bookList.count}, 第一个：${bookList.first}, 最后一个：${bookList.last}</h1><h2>书名：${book.name}</h2><h2>价格：${book.price}</h2></div><h1>==== data-sly-template =====</h1><div data-sly-use.booksTemplate="booksTemplate.html"><sly data-sly-call="${booksTemplate.templateBooks @ books=model.books}"></sly></div>
</sly>

查看效果

请添加图片描述

data-sly-call

在上面的代码中，可以看到在使用模板时需要通过data-sly-call来调用模板中的元素booksTemplate.templateBooks，并将model中的Books集合传递给templateBooks元素

<h1>==== data-sly-template =====</h1>
<div data-sly-use.booksTemplate="booksTemplate.html"><sly data-sly-call="${booksTemplate.templateBooks @ books=model.books}"></sly>
</div>