Передача параметров в data-sly-include в sightly/HTL

У меня есть фрагмент кода 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>

Это возможно? Заранее спасибо!

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>
Другие вопросы по тегам