带有脚本内联的 Vapor 3 渲染叶模板
Vapor 3 Rendering leaf template with script inline
我正在尝试使用 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> </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")
您的根本问题是 Javascript 中的 }
字符被 Leaf
捕获,因为它位于 #set
标签内。您有两个选择:
将它留在原处,将 <script>
标签内 }
的所有实例转义为 \}
。据我所知,它不需要 {
以相同的方式转义;据推测,这是因为前面没有 Leaf
标记。这工作可靠,您可以使用 Leaf
生成您的 javascript 服务器端,然后再将其发送到客户端。
将 <script>
和内容移动到 #set
标签上方(即外部)。如果您确实在 javascript 中嵌入了任何 Leaf
标签,您将需要开始转义属于 Javascript 的任何 }
个字符作为选项 1。
我正在尝试使用 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> </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")
您的根本问题是 Javascript 中的 }
字符被 Leaf
捕获,因为它位于 #set
标签内。您有两个选择:
将它留在原处,将
<script>
标签内}
的所有实例转义为\}
。据我所知,它不需要{
以相同的方式转义;据推测,这是因为前面没有Leaf
标记。这工作可靠,您可以使用Leaf
生成您的 javascript 服务器端,然后再将其发送到客户端。将
<script>
和内容移动到#set
标签上方(即外部)。如果您确实在 javascript 中嵌入了任何Leaf
标签,您将需要开始转义属于 Javascript 的任何}
个字符作为选项 1。