CODEWITHSUNDEEP
javascriptjquerytemplatesunderscore.jssingle-page-application
Bunjip
Bunjip

Reputation: 297

Underscore.js templates: Template variable not rendered

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 come 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.

Upvotes: 3

Views: 6456

Answers (1)

atomman
atomman

Reputation: 2507

Your templates are wrong. You are using <%= ... => while it should be <%= ... %>.

Following the information from the underscore documentation, they provide the following example. 

var compiled = _.template("hello: <%= name %>");
compiled({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. :)

Upvotes: 9

Related Questions