четвер, 7 лютого 2013 р.

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!


5 коментарів:

  1. Aw, this was a very nice post. Taking the timе and actual effort to generate a good article…
    but what can I say… I put things off a wholе lot
    and don't manage to get anything done.

    Feel free to visit my website Bauchmuskelübungen

    ВідповістиВидалити
  2. It's awesome for me to have a web page, which is helpful for my experience. thanks admin

    Feel free to visit my website: Bauchmuskeltraining

    ВідповістиВидалити
  3. Gooԁ dау! This iѕ mу firѕt viѕit to your blοg!
    We are a gгoup of ѵolunteers аnԁ
    staгtіng a nеw pгoϳеct іn а communitу іn the same
    nіchе. Your blog ρrοvideԁ us
    useful іnformatiοn to woгk
    οn. You havе done a ωοndеrful job!



    Αlsο visit my web page bauchmuskelübungen

    ВідповістиВидалити
  4. I could not resist commentіng. Perfectly wrіttеn!



    Feel free to visit my ρage Bauchmuskeltraining
    (http://www.lovecolombian.com)

    ВідповістиВидалити