Vapor 3 渲染葉模板與腳本內聯

Question

我正在嘗試使用 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")

Answer 1

您的根本問題是 Javascript 中的}字符被Leaf捕獲，因為它位於#set標簽內。 你有兩個選擇：

1. 將它留在將<script>標簽內的所有}實例轉義到\\} 。 據我所知，它不需要{以同樣的方式轉義； 大概是因為前面沒有Leaf標簽。 這工作可靠，您可以使用Leaf在將其發送到客戶端之前生成您的 javascript 服務器端。

2. 將<script>和內容移動到#set標記上方（即外部）。 如果您確實在 javascript 中嵌入了任何Leaf標簽，則需要開始轉義屬於 Javascript 的任何}字符作為選項 1。