update element using underscore

Question

I have used templates using underscore using this tutorial. http://backbonetutorials.com/what-is-a-view/

I have a situation where I just want to add some text in a p tag to a div structure. This is not a template just some text that needs to have some values injected into it. Is there a way to use underscore to just updated the variables in this text. Or would I need to create the text as a template and then add the template using html(_template)

<div id="popup">
<p>I want to add some text in here <%=variable1%>, Then add another variable text in here <%=variable2%></p>
</div>

UPDATE:

I tried doing it based off the template docs using this code.

<html>
<head>
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/underscore.js"></script>
   <script type="text/javascript" src="js/core.js"></script>
</head>
<body>
    <div id="popup">
    <div id="template_holder"></div>
    </div>

<!-- TEMPLATES FOR CANCEL PAYMENT MODEL -->
<script type="text/template" id="card-success_tmp">
    <p>I want to add some text in here <%=variable1%>, Then add another variable text in here <%=variable2%></p>
</script>
</body>
</html>

Then in my core js file I have this code below inside a click event that launches my popup

var variables = {variable1:'[xxxx]', variable2:'[MM/YY]'};
var template = _.template( $("#card-success_tmp").html(), variables );
$('#popup #template_holder').html(template);

But the above is still not working.

I have even tried

var template = _.template( $("#card-success_tmp").html() );
$('#popup #template_holder').html(template({variable1:'[xxxx]', variable2:'[MM/YY]'}));

It renders the text but the passed in variables do not get rendered.

If I added the template as a string and not from the script tag then it will work. The question is why is it not working from the script tag. It renders the text but not the variables passed into it.

var template = _.template( "<p>I want to add some text in here <%=variable1%>, Then add another variable text in here <%=variable2%></p>" );
$('#popup #template_holder').html(template({variable1:'[xxxx]', variable2:'[MM/YY]'}));

plain underscore, or do you have backbone (including jQuery)? — Bergi, May 16 '13 at 20:13
I have jquery and underscore in my project. I'm just using underscore for templates. — Chapsterj, May 16 '13 at 20:21

Bergi · Answer 1 · 2013-05-16T21:05:27.013

This is not a template just some text that needs to have some values injected into it.

Which makes it a template, doesn't it?

As the Underscore docs mention, you can either precompile it:

var tmpl = _.template("<p>I want to add some text in here <%=variable1%>, Then add another variable text in here <%=variable2%></p>");

// often:
$("#popup").append(tmpl({variable1: "some text", variable2:"another variable text"}));

or directly call it:

$("#popup").append(_.template(
    "<p>I want to add some text in here <%=variable1%>, Then add another variable text in here <%=variable2%></p>",
    {variable1: "some text", variable2:"another variable text"}
));

On your provided snippets: The template_holder div has an id, not a class attribute. Fixing that, both of your codes work.

Hi Bergi I have updated my question using the underscore docs but I still can't get it to render my variables in the template. — Chapsterj, May 16 '13 at 20:56

score 0 · Answer 2 · edited May 23 '17 at 12:05

The reason my code was not working just incase anyone else runs into this same problem. My template is inside a .gsp file which is a grails application file. So when it renders to html it removes the underscore tags because grails uses the ERB syntax for comments. The key here is to change the ERB syntax to mustache.js style tags. In order for underscore to know this change has happened you must also add some default settings for underscore. So in your js file just add this at the top.

_.templateSettings.interpolate = /\{\{=(.+?)\}\}/g;
_.templateSettings.evaluate = /\{\{(.+?)\}\}/g;

Then your template code can look like this.

<script type="text/template" id="card-success_tmp">
    <p>I want to add some text in here {{=variable1}}, Then add another variable text in here {{=variable2}}</p>
</script>

Here is another good post on this. Boolean checks in underscore templates

update element using underscore

2 Answers2