How to include partial templates in child templates

Question

Right now I have a base.leaf file that imports the body from other files successfully.

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

In my report.leaf file I need to display different report templates at the bottom of this page based on the selected option. For example, if the Wire is selected, I want to import that section of the code from the wire.leaf file and so on. In GRAILS GROOVY, importing partial files are done by <g:render template="/shared/report/wire" />. But I can't seem to figure out how to do so in 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") -->
}

Here is my wire.leaf file.

/// 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>
}

I did read this documentation on #embed but I'm still very confused. Any help will be highly appreciated!

score 1 · Accepted Answer · answered Jan 22 '18 at 00:53

Vapor runs server-side. This means it won’t know, by itself, which option is selected by the client at the time the template is rendered. By the time the user can see the page and interact with it, Vapor is no longer involved.

This means you have two choices. Either use client-side programming (i.e. JavaScript, or one of its many frameworks) to show the correct template when the user selects it, or, make the action of the client selecting an option force a reload from the Vapor server which will now know what template to produce.

JavaScript option: You will either include HTML code for all options in the generated HTML, with something like display: none set for each of them, and a listener on the select box which dynamically shows and hides content as appropriate; or, use something like Vue.js to handle templating for you, potentially even bypassing Leaf entirely.

Server-side option: You should listen on the select box. The act of the user choosing an option should cause the window to navigate to something like /report/?option=wire. Vapor should look out for the GET variable called option, and if present, render the appropriate template section.

(Hybrid option, for completeness: when the user chooses an option, the JS sends a request to Vapor for only the content section and inserts it into the document.)

How to include partial templates in child templates

1 Answers1