How to Use UnderscoreJS Templates Example 2

by shravan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<div id="output"></div>

<script id="sample-template" type="text/html">
  <p>
    Latitude:
    <%= latitude %>
  </p>
  <p>
    Longitude:
    <%= longitude %>
  </p>

  <% var numbers = [1, 2, 3, 4, 5]; %>
    <ul>
      <% _(numbers).each(function(number) { %>
        <li>
          <%= number %>
        </li>
        <% }); %>
    </ul>

    <p>HTML escaped output:
      <%=htmlContent%>
    </p>
</script>

JavaScript

var data = {
  latitude: 20.2,
  longitude: 30.5,
  htmlContent: '<div class="title">This <span>UnderscoreJs Templating</span> Example</div>'
};

var templateSelector = document.querySelector('#sample-template');

var templateString = templateSelector.innerHTML;

var template = _.template(templateString);

var result = template(data);

var outputDiv = document.querySelector("#output");

outputDiv.innerHTML = result;