参数传递给数据SLY-包括悦目/ HTL

问题描述：

<div class="tooltip_modal"> 
    <div class="modal-content"> 
    <div class="modal-header"> 
     <span class="close">&times;</span> 
     <h5>Tooltip</h5> 
    </div> 
    <div class="modal-body"> 
     <p>${properties.tooltip_textfield}</p> 
    </div> 
    </div> 
</div>

请注意，${properties.tooltip_textfield}是硬编码到代码。我包括这个代码在我的组件这样的 -

<div data-sly-include="/custom/tooltip-modal/tooltip-modal.html" data-sly-unwrap></div>

现在我想通过一个参数数据狡猾，包括语句，这样，当我的HTML代码呈现，传递的参数应该放置到位${properties.tooltip_textfield}。

换句话说 -

调用此

<div data-sly-include="/custom/tooltip-modal/tooltip-modal.html" parameter= "Dummy Text" data-sly-unwrap></div>

应该呈现这样 -

<div class="tooltip_modal"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <span class="close">&times;</span> 
      <h5>Tooltip</h5> 
     </div> 
     <div class="modal-body"> 
      <p>Dummy Text</p> 
     </div> 
     </div> 
    </div>

这可能吗？在此先感谢！

重复：HTTPS：//stackoverflow.com/questions/45325568/aem-sightly-how-to-reuse - 变量/ 45326997＃45326997 – iusting

答

我相信你所追求的是Sightly Template and Call功能。

模板/ tooltip.html：

<template data-sly-template.tooltip="${@ text}" class="tooltip_modal"> 
    <div class="modal-content"> 
    <div class="modal-header"> 
     <span class="close">&times;</span> 
     <h5>Tooltip</h5> 
    </div> 
    <div class="modal-body"> 
     <p>${text}</p> 
    </div> 
    </div> 
</template>

component.html：

<sly data-sly-use.tooltipTmpl="templates/tooltip.html" 
data-sly-call="${tooltipTmpl.tooltip @ text='Sample text'}" data-sly-unwrap> 
</sly>

参数传递给数据SLY-包括悦目/ HTL

相关推荐