underscore.js template from an HTML element

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>

The above would work perfectly if the html() call wouldn't return this: <%= title %>

I want it to return exactly <button><%= title %></button>, as I wrote it in the HTML, so I can use it for templating with underscore.

How?

Alternatively, is there any better way? Without extra dependency (jquery/underscore only). Without (too much) extra code.

It's funny how you find an answer almost right after you ask a question, even if you spent hours on it. There is an option to _.templateSettings() which will change Underscore's template settings to use different symbols to set off interpolated code. However, I'm still interested in hearing your opinions. — Poni
– Poni, Commented Jul 8, 2012 at 13:16
Well storing your templates in parsed HTML elements is liable to give you problems no matter what you do with the Underscore settings. — Pointy
– Pointy, Commented Jul 8, 2012 at 13:38

Pointy · Accepted Answer · 2012-07-08 13:23:50Z

4

Instead of storing your template source in a <div>, put it in an unevaluated <script> block:

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

When you fetch the contents of that with .html(), you'll get the contents back exactly as they look. That "type" value is made-up (by me); you can use anything except a real JavaScript type, and the browser will just ignore it completely. It will however include it in the DOM and allow you to fetch its contents. Since the contents are not expected to be HTML, it won't care about the HTML metacharacters.

The conversion of your template markers to < and '>' is being done by the browser because that's really what you've fed it: unescaped HTML metacharacters are really not allowed, but the browser recognizes that that's what the <% and %> are so it interprets them that way.

answered Jul 8, 2012 at 13:23

Pointy

415k62 gold badges600 silver badges631 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Poni Over a year ago

Excellent answer and insights. Thank you!

mu is too short Over a year ago

This is doubly true when you have <div id="event"> in the template.

Collectives™ on Stack Overflow

underscore.js template from an HTML element

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related