如何在子模板中包含部分模板答案

【问题标题】：How to include partial templates in child templates如何在子模板中包含部分模板
【发布时间】：2018-01-19 17:20:41
【问题描述】：

现在我有一个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 上的 this 文档，但我仍然很困惑。任何帮助将不胜感激！

【问题讨论】：

标签： import vapor leaf

【解决方案1】：

Vapor 在服务器端运行。这意味着它自己不会知道在呈现模板时客户端选择了哪个选项。当用户可以看到页面并与之交互时，Vapor 不再参与。

这意味着您有两个选择。要么使用客户端编程（即 JavaScript，或其众多框架之一）在用户选择它时显示正确的模板，要么使客户端选择选项的动作强制从 Vapor 服务器重新加载，现在将知道生成什么模板。

JavaScript 选项：您将在生成的 HTML 中包含所有选项的 HTML 代码，为每个选项设置类似 display: none 的内容，并在 select 框中设置一个侦听器，该侦听器根据需要动态显示和隐藏内容；或者，使用 Vue.js 之类的东西为您处理模板，甚至可能完全绕过 Leaf。

服务器端选项：您应该收听select 框。用户选择选项的行为应该会导致窗口导航到类似/report/?option=wire 的内容。 Vapor 应注意名为 option 的 GET 变量，如果存在，则渲染相应的模板部分。

（混合选项，为了完整性：当用户选择一个选项时，JS 向 Vapor 发送仅内容部分的请求并将其插入到文档中。）

【讨论】：