如何在子模板中包含部分模板
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在子模板中包含部分模板相关的知识,希望对你有一定的参考价值。
现在我有一个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>
}
我确实读过关于this的#embed
文档,但我仍然很困惑。任何帮助将非常感谢!
Vapor运行服务器端。这意味着它本身不会知道客户端在呈现模板时选择了哪个选项。当用户可以看到页面并与之交互时,Vapor不再参与其中。
这意味着您有两个选择。使用客户端编程(即javascript或其众多框架之一)在用户选择时显示正确的模板,或者让客户端选择一个选项的操作强制从Vapor服务器重新加载,现在知道要生成什么模板。
JavaScript选项:您将为生成的HTML中的所有选项包含HTML代码,为每个选项设置display: none
,并在select
框中包含一个适当动态显示和隐藏内容的侦听器;或者,使用像Vue.js这样的东西为你处理模板,甚至可能完全绕过Leaf。
服务器端选项:你应该听select
框。用户选择选项的行为应该导致窗口导航到类似/report/?option=wire
的东西。 Vapor应该注意名为GET
的option
变量,如果存在,则渲染相应的模板部分。
(混合选项,为了完整性:当用户选择一个选项时,JS仅向内容部分发送请求到Vapor,并将其插入到文档中。)
以上是关于如何在子模板中包含部分模板的主要内容,如果未能解决你的问题,请参考以下文章
如何在播放框架模板的 html 标记中包含一段 java 代码?