Vapor 3 使用内联脚本渲染叶子模板答案

【问题标题】：Vapor 3 Rendering leaf template with script inlineVapor 3 使用内联脚本渲染叶子模板
【发布时间】：2020-01-03 22:53:32
【问题描述】：

我正在尝试使用 Leaf 在 Vapor 3 中渲染模板。我的大部分 HTML 都在我的 base.leaf 中。在login.leaf模板中，我需要添加一个JS脚本。问题是当它到达函数时它会中断并呈现函数。谁能告诉我如何正确添加这些？提前感谢您的帮助。以下是给我带来问题的原因：

#set("content") {
  <h1>#(title)</h1>
<div id="logo"><img src="images/global/journey_trax_logo.png" alt=""/></div>
<div id="sheet1" class="form_sheet">
    <input type="text" class="text_input" id="name_field" placeholder="NAME">
    <input type="password" class="text_input" id="password_field" placeholder="PASSWORD">
    <div id="continue_btn1" class="text_btn" onClick="logIn();">Continue</div>
    <p>&nbsp;</p>
</div>
<script>
    var user_name = readCookie("user_name");
    var user_password = readCookie("user_password");
    document.getElementById("user_name").value = user_name;
    document.getElementById("user_password").value = user_password;

    function logIn() {
        var baseURL = window.top.location.href;
        if (baseURL.indexOf("#") != -1) {
            baseURL = window.location.href.split("#")[0];
        }
        var url = baseURL + "login";
        console.log("[logIn] post to URL: "+url);
        console.log("[logIn] name: "+user_name+", password: "+user_password);
        $.post( url,
          {
              name: user_name,
              password: user_password
          },
          function(data) {
            // Do something with the return data?
            console.log("[logIn] callback data: "+data);
            console.log("[logIn] handle succes or error");
            //
            parent.loadHTML('screens/home.html');
          }
       );
    }
</script>
    <style>
        .text_input, select {
            width: 100%;
            margin-bottom: 30px;
        }

        .text_btn {
            width: 100%;
            margin-top: 20px;
            cursor: pointer;
        }
    </style>
}
#embed("base")

【问题讨论】：

标签： vapor leaf

【解决方案1】：

您的基本问题是 Javascript 中的 } 字符被 Leaf 捕获，因为它位于 #set 标记内。你有两个选择：

把它留在你的<script>标签内的所有}实例转义到\}。据我所知，它不需要 { 以同样的方式转义；据推测，这是因为前面没有 Leaf 标记。这很可靠，您可以使用Leaf 在将其发送到客户端之前生成您的 JavaScript 服务器端。
将<script> 和内容移到#set 标记上方（即外部）。如果您确实在 javascript 中嵌入了任何 Leaf 标签，则需要开始转义属于 Javascript 的任何 } 字符作为选项 1。

【讨论】：