gpt4 book ai didi

javascript - 来自 HTML 元素的 underscore.js 模板

转载 作者:行者123 更新时间:2023-11-29 20:07:38 25 4
gpt4 key购买 nike

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<style type="text/css">
#template {
display: none;
}
</style>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script
src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
</head>
<body>

<div id="template">
<div id="event">
<button><%= title %></button>
</div>
</div>

<button id="cmd_create_event" name="cmd_create_event" type="button">Create
a new `EventModel`</button>

<div id="div_event_list"></div>

<script type="text/javascript">
$(document).ready(function() {
$("#cmd_create_event").click(function() {
var template = $("div#template div#event").children().html();
var compiled = _.template(template);
$("#div_event_list").html(compiled({
title : "New Event Title"
}));
});
});
</script>

</body>
</html>

如果 html() 上面的代码将完美运行调用不会返回此:&lt;%= title %&gt;

我希望它准确地返回<button><%= title %></button> ,正如我在 HTML 中所写的那样,因此我可以将其用于带下划线的模板。

如何?

或者,有没有更好的办法?没有额外的依赖(仅限 jquery/underscore)。没有(太多)额外的代码。

最佳答案

而不是将模板源存储在 <div> 中, 把它放在一个未评估的 <script> 中 block :

<script type='text/template' id='template'>
<button><%= title %></button>
</script>

当您使用 .html() 获取内容时,您将完全按照它们的外观取回内容。那个“类型”值是(由我)编造的;你可以使用除真正的 JavaScript 类型之外的任何东西,浏览器将完全忽略它。但是,它会将它包含在 DOM 中并允许您获取其内容。由于预期内容不是 HTML,因此它不会关心 HTML 元字符。

将模板标记转换为 &lt;并且“>”是由浏览器完成的,因为这确实是您提供给它的:实际上不允许使用未转义的 HTML 元字符,但浏览器会识别出这就是 <% 的内容。和 %>是这样的,它就是这样解释的。

关于javascript - 来自 HTML 元素的 underscore.js 模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11383411/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com