I've just started to play around with jQuery and underscore.js to grab the basics of Single Page Application development with JavaScript. Before getting into any client side MVC framework, I want to understand some more basic stuff, such as template insertion.
My issue: Template variables are not evaluated when the HTML is rendered via _.template(). The HTML:
<body>
<script id="app-view-1" type="text/template">
<div id="app-view-1-container" class="app-workbench-container active-panel">
<h2><%= title =></h2>
<ul class="choice-list">
<li><a class="" id="" href="#" data-choice="choice 1"></a></li>
<li><a class="" id="" href="#" data-choice="choice 2"></a></li>
</ul>
</div>
</script>
<script id="app-view-2" type="text/template">
<div id="app-view-2-container" class="app-workbench-container active-panel">
<h2><%= title =></h2>
<form id="" class="input-panel active-panel" action="#">
<input type="text" id="input-field-1" class="app-control">
<input type="radio" id="radio-button-1" class="app-control" value="value-1">Value 1
<input type="submit" id="submit-button-1" class="app-control">
</form>
</div>
</script>
<header id="app-header">
<h1>Single Page App (SPA) Test</h1>
<nav id="main-menu-panel">
<ul id="main-menu">
<li class="main-menu-item"><a id="view-1" class="" data-target="app-view-1" href="#">View 1</a></li>
<li class="main-menu-item"><a id="view-2" class="" data-target="app-view-2" href="#">View 2</a></li>
<li class="main-menu-item"><a id="view-3" class="" data-target="app-view-3" href="#">View 3</a></li>
</ul>
</nav>
</header>
<main id="app-body">
<p class="active-panel">Different app partials e here...</p>
</main>
<footer></footer>
<script src="js/vendors/jquery/jquery-1.10.2.min.js"></script>
<script src="js/vendors/node_modules/underscore/underscore-min.js"></script>
<script src="js/app.js"></script>
</body>
And here's the JavaScript of app.js, too:
$(document).ready(function(){
console.log("Application ready...\n");
$(".main-menu-item").on("click", "a", function(event){
var target = $(this).data("target");
var partial = _.template($("#" + target).html());
event.preventDefault();
$(".active-panel").remove();
$("#app-body").append(partial({title : target}));
});
});
However, "<%= title =>" appears as a literal string in the rendered output, the actual title, that should have been assigned in the partial() function, does not appear. What's wrong here? Any help is much appreciated.
I've just started to play around with jQuery and underscore.js to grab the basics of Single Page Application development with JavaScript. Before getting into any client side MVC framework, I want to understand some more basic stuff, such as template insertion.
My issue: Template variables are not evaluated when the HTML is rendered via _.template(). The HTML:
<body>
<script id="app-view-1" type="text/template">
<div id="app-view-1-container" class="app-workbench-container active-panel">
<h2><%= title =></h2>
<ul class="choice-list">
<li><a class="" id="" href="#" data-choice="choice 1"></a></li>
<li><a class="" id="" href="#" data-choice="choice 2"></a></li>
</ul>
</div>
</script>
<script id="app-view-2" type="text/template">
<div id="app-view-2-container" class="app-workbench-container active-panel">
<h2><%= title =></h2>
<form id="" class="input-panel active-panel" action="#">
<input type="text" id="input-field-1" class="app-control">
<input type="radio" id="radio-button-1" class="app-control" value="value-1">Value 1
<input type="submit" id="submit-button-1" class="app-control">
</form>
</div>
</script>
<header id="app-header">
<h1>Single Page App (SPA) Test</h1>
<nav id="main-menu-panel">
<ul id="main-menu">
<li class="main-menu-item"><a id="view-1" class="" data-target="app-view-1" href="#">View 1</a></li>
<li class="main-menu-item"><a id="view-2" class="" data-target="app-view-2" href="#">View 2</a></li>
<li class="main-menu-item"><a id="view-3" class="" data-target="app-view-3" href="#">View 3</a></li>
</ul>
</nav>
</header>
<main id="app-body">
<p class="active-panel">Different app partials e here...</p>
</main>
<footer></footer>
<script src="js/vendors/jquery/jquery-1.10.2.min.js"></script>
<script src="js/vendors/node_modules/underscore/underscore-min.js"></script>
<script src="js/app.js"></script>
</body>
And here's the JavaScript of app.js, too:
$(document).ready(function(){
console.log("Application ready...\n");
$(".main-menu-item").on("click", "a", function(event){
var target = $(this).data("target");
var partial = _.template($("#" + target).html());
event.preventDefault();
$(".active-panel").remove();
$("#app-body").append(partial({title : target}));
});
});
However, "<%= title =>" appears as a literal string in the rendered output, the actual title, that should have been assigned in the partial() function, does not appear. What's wrong here? Any help is much appreciated.
Share Improve this question asked Nov 20, 2013 at 14:35 BunjipBunjip 2975 silver badges15 bronze badges 01 Answer
Reset to default 9Your templates are wrong. You are using <%= ... => while it should be <%= ... %>.
Following the information from the underscore documentation, they provide the following example.
var piled = _.template("hello: <%= name %>");
piled({name: 'moe'}); // returns "hello: moe"
Supported underscore.js template tags are:
<% ... %>for script execution<%= ... %>to interpolate variables (print)<%- ... %>to interpolate variables and have it be HTML-escaped
Edit
I used this jsFiddle. In the future please provide suchs an example, it makes everything much easier for everyone. :)