2 
<!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）。没有（太多）额外的代码。

4

1 回答 1

4

不要将模板源存储在 a 中<div>，而是将其放在未评估的<script>块中：

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

当您使用 获取该内容时.html()，您将获得与它们外观完全相同的内容。该“类型”值是（由我）组成的；除了真正的 JavaScript 类型，你可以使用任何东西，浏览器会完全忽略它。然而，它会将其包含在 DOM 中并允许您获取其内容。由于内容不应该是 HTML，它不会关心 HTML 元字符。

模板标记到&lt;和“>”的转换是由浏览器完成的，因为这确实是您输入的内容：未转义的 HTML 元字符确实是不允许的，但是浏览器认识到这就是<%和%>所以它解释它们方法。

于 2012-07-08T13:23:50.140 回答