Как включить частичные шаблоны в дочерние шаблоны

Прямо сейчас у меня есть base.leaf файл, который успешно импортирует тело из других файлов.

/// base.leaf
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    .
    .
    .
    <!-- Begin page content -->
    <div class="body-content">
     #import("content")
    </div>
    .
    .
    .
  </body>
</html>

В моем report.leaf файл Мне нужно отобразить различные шаблоны отчетов в нижней части этой страницы в зависимости от выбранной опции. Например, если Wire я хочу импортировать этот раздел кода из wire.leaf файл и тд. В GRAILS GROOVY импорт частичных файлов выполняется <g:render template="/shared/report/wire" />, Но я не могу понять, как это сделать в vapor/leaf,

/// report.leaf
#extend("base")

#export("content") {
  <h2>Generate Report</h2>
  <section>
    <ul>
      <li>
        <label for="report">select report</label>
        <select name="report">
          <option value="-1">-- Select Report --</option>
          <option value="1">Purchaser Confirm</option>
          <option value="2">Wire</option>
          <option value="3">Withdrawal Letter</option>
        </select>
      </li>
      <li>
       <input type="submit" value="run  report" />
      </li>
    </ul>
  </section>

  /// Display different report templates based on the selected option
  <!-- #export("report") { #embed("section") } -->
  <!-- #import("wire") -->
  <!-- #embed("section") -->
  <!-- #import("report-content") -->
}

Вот мой wire.leaf файл.

/// wire.leaf
<!-- 
/// Trying the:  #export("report") { #embed("section") } 
<section>
  <h3>Wire info for Loan # 123456789</h3>
  <div>
    <ul>
      <li>Name: Marlin Bank</li>
      <li>CMG: 007</li>
      <li>MtDt: 005689</li>
      <li>CUSIP: BDTK001</li>
      <li>GP: 5</li>
    </ul>
  </div>
  <div>
    <input type="submit" value="print" />
  </div>
</section> 
-->

/// Trying the:  #import("report-content")
#export("report-content") {
<section>
  <h3>Wire info for Loan # 123456789</h3>
  <div>
    <ul>
      <li>Name: Marlin Bank</li>
      <li>CMG: 007</li>
      <li>MtDt: 005689</li>
      <li>CUSIP: BDTK001</li>
      <li>GP: 5</li>
    </ul>
  </div>
  <div>
    <input type="submit" value="print" />
  </div>
</section>
}

Я прочитал эту документацию на #embed но я все еще очень растерялся. Любая помощь будет высоко оценена!

Источник

1 ответ

Решение

Vapor работает на стороне сервера. Это означает, что он сам не будет знать, какая опция выбрана клиентом во время визуализации шаблона. К тому времени, когда пользователь может видеть страницу и взаимодействовать с ней, Vapor больше не участвует.

Это означает, что у вас есть два варианта. Либо используйте программирование на стороне клиента (т. Е. JavaScript или одну из его многочисленных платформ), чтобы показать правильный шаблон, когда пользователь выбирает его, либо выполните действие клиента, выбрав опцию, для принудительной перезагрузки с сервера Vapor, который теперь будет знать какой шаблон производить.

Опция JavaScript: вы будете включать HTML-код для всех опций в сгенерированном HTML, например display: none установить для каждого из них, и слушатель на select поле, которое динамически отображает и скрывает содержимое по мере необходимости; или используйте что-то вроде Vue.js для обработки шаблонов для вас, потенциально даже полностью обходя Leaf.

Вариант на стороне сервера: вы должны слушать select коробка. Действия пользователя по выбору параметра должны привести к тому, что окно перейдет к чему-то вроде /report/?option=wire, Пар должен высматривать GET переменная называется optionи, если имеется, визуализируйте соответствующий раздел шаблона.

(Гибридный вариант, для полноты: когда пользователь выбирает параметр, JS отправляет запрос в Vapor только для раздела содержимого и вставляет его в документ.)

Источник
Другие вопросы по тегам