Resolving underscore templates and Java JSTL conflict

Front-end development has made a huge step for the last couple of year... Could you imagine backbone or underscore in earlier 2010? I'm not... now it has a lot of new possibilities, and new changeless for JSTL users.

Today you can create real cool application with using Rest and html/javascript. So, you can (and you have to) separate backend and frontend development. As for me, the real cool thing is a templating engine in javascript. I'm talking about frameworks like underscore.js and mustache.js. Both is awesome, both is cool and must to be used. In this article I'll discuss underscore templatting.

Let's imagine you consider use underscore and read about templates. The Underscore toolkit includes an easy-to-use templating feature that easily integrates with any JSON data source. For example, you need to repeat some fragment of html many times. For Example, you get list of employees in your AJAX request. With template you have to define place for inserting list of users (let's we want to have table).

Your restfull service returns json with name, position and set of phone numbers, you fetch it w/ backbone and create related DOM.

However there is one problem. In JSTL <% %> is using to mark scriplets... So, we have conflict: JSP vs underscore. And JSP wins!  Fortunately, there is solution - you can override underscore template symbols to use <@ @> instead of <% %> for underscore!

    // underscore templating
    $(document).ready(function ()
    {            
     _.templateSettings = {
      interpolate: /\<\@\=(.+?)\@\>/gim,
      evaluate: /\<\@(.+?)\@\>/gim,
      escape: /\<\@\-(.+?)\@\>/gim
  };
     
    });

So, html fragment:

<table id="employees">
</table>

We aim to insert list of employees here with the next information: employee's name, position, phone number(s). Ok, it's really easy. Our template is:

<script id="employee-template" type="text/template">

  <@=name@>
  <@=position@>
  <@ _.each(phones, function(i) {<@=i@>, }@>
 

Template is ready, know just let's init this template:

var template_html = _.template($('#employee-template').html());
    
var h = $(template_html({name: item.get("name"), position: item.get("position"), phones: item.get("phones")}))

$('#employees').append( h );

that's all!