Question

我有一段Sightly / 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>

现在我想将一个参数传递给data-sly-include语句，以便在呈现我的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>

这可能吗？在此先感谢！

Answer 1

我相信你所追求的是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>

将参数传递给数据狡猾 - 包含在sightly / HTL中

1 个答案: