Question

<!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()调用不会返回此内容，则以上内容将完美运行：<%= title %>

我希望它返回完全 <button><%= title %></button>，就像我在HTML中编写它一样，所以我可以用它来用下划线进行模板化。

如何？

或者，有没有更好的方法？没有额外的依赖（仅jquery / underscore）。没有（太多）额外的代码。

Answer 1

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

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

当您使用.html()获取内容时，您将获得与其外观完全相同的内容。那种“类型”价值是由我制造的;您可以使用除之外的任何实际JavaScript类型，浏览器将完全忽略它。但是它会将它包含在DOM中，并允许您获取其内容。由于内容不是HTML，因此不关心HTML元字符。

将模板标记转换为<和'＆gt;'是由浏览器完成的，因为这真的是你提供的：非转义的HTML元字符实际上是不被允许的，但是浏览器认识到这就是<%和%>所以它以这种方式解释它们

来自HTML元素的underscore.js模板

1 个答案: