How to use underscore js as a template engine

Question

I m trying to learn about new usages of javascript as a serverside language and as a functional language  Few days ago I heard about node js and express framework  Then I saw about underscore js as a set of utility functions  I saw this question on stackoverflow   It says we can use underscore js as a template engine  anybody know good tutorials about how to use underscore js for templating  especially for biginners who have less experience with advanced javascript  Thanks

User · Answer

Lodash is also the same First write a script as follows:

<script type="text/template" id="genTable">
<table cellspacing='0' cellpadding='0' border='1'>
        <tr>
            <% for(var prop in users[0]){%>
            <th><%= prop %> </th>
            <% }%>
        </tr>
        <%_.forEach(users, function(user) { %>
            <tr>
                 <% for(var prop in user){%>
                    <td><%= user[prop] %> </td>
                <% }%>

            </tr>
        <%})%>
</table>

Now write some simple JS as follows:

var arrOfObjects = [];
for (var s = 0; s < 10; s++) {
    var simpleObject = {};
    simpleObject.Name = "Name_" + s;
    simpleObject.Address = "Address_" + s;
    arrOfObjects[s] = simpleObject;
}
var theObject = { 'users': arrOfObjects }
var compiled = _.template($("#genTable").text());
var sigma = compiled({ 'users': myArr });

$(sigma).appendTo("#popup");

Where popoup is a div where you want to generate the table

User · Answer

The documentation for templating is partial  I watched the source   The   template function has 3 arguments    String text   the template string Object data   the evaluation data Object settings   local settings  the   templateSettings is the global settings object   If no data  or null  given  than a render function will be returned  It has 1 argument     Object data   same as the data above   There are 3 regex patterns and 1 static parameter in the settings      RegExp evaluate     lt  code    in template string RegExp interpolate     lt   code    in template string RegExp escape     lt  -code    String variable   optional  the name of the data parameter in the template string   The code in an evaluate section will be simply evaluated  You can add string from this section with the   p   mystring  command to the evaluated template  but this is not recommended  not part of the templating interface   use the interpolate section instead of that  This type of section is for adding blocks like if or for to the template   The result of the code in the interpolate section will added to the evaluated template  If null given back  then empty string will added   The escape section escapes html with   escape on the return value of the given code  So its similar than an   escape code  in an interpolate section  but it escapes with   the whitespace characters like  n before it passes the code to the   escape  I don t know why is that important  it s in the code  but it works well with the interpolate and   escape - which doesn t escape the white-space characters - too   By default the data parameter is passed by a with data       statement  but this kind of evaluating is much slower than the evaluating with named variable  So naming the data with the variable parameter is something good     For example   var html     template        lt pre gt The    lt     p    escape o text    gt    is the same lt br   gt              as the     lt      escape o text    gt    and the same lt br   gt              as the    lt  - o text   gt    lt  pre gt                  text    lt b gt some text lt  b gt  and  n it s a line break                       variable   o               body   html html     results  The   lt b gt some text lt  b gt  and   it s a line break  is the same as the   lt b gt some text lt  b gt  and   it s a line break  and the same as the   lt b gt some text lt  b gt  and   it s a line break    You can find here more examples how to use the template and override the default settings  http   underscorejs org  template  By template loading you have many options  but at the end you always have to convert the template into string  You can give it as normal string like the example above  or you can load it from a script tag  and use the  html   function of jquery  or you can load it from a separate file with the tpl plugin of require js   Another option to build the dom tree with laconic instead of templating

User · Answer

I wanted to share one more important finding   use of  lt    variable    would result in cross-site scripting vulnerability  So its more safe to use  lt  - variable -  instead   We had to replace  lt    with  lt  - to prevent cross-site scripting attacks  Not sure  whether this will it have any impact on the performance

User · Answer

In it s simplest form you would use it like   var html     template   lt li gt  lt    name   gt  lt  li gt      name   John Smith        html is now   lt li gt John Smith lt  li gt        If you re going to be using a template a few times you ll want to compile it so it s faster   var template     template   lt li gt  lt    name   gt  lt  li gt      var html       for  var key in names        html    template   name  names i         console log html join         Outputs a string of  lt li gt  items   I personally prefer the Mustache style syntax  You can adjust the template token markers to use double curly braces     templateSettings interpolate                  g   var template     template   lt li gt    name    lt  li gt

User · Answer

Everything you need to know about underscore template is here  Only 3 things to keep in mind     lt      gt  - to execute some code  lt      gt  - to print some value in template  lt  -   gt  - to print some values HTML escaped   That s all about it   Simple example   var tpl     template   lt h1 gt Some text   lt    foo   gt  lt  h1 gt       then tpl  foo   blahblah    would be rendered to the string  lt h1 gt Some text  blahblah lt  h1 gt

User · Answer

I am giving a very simple example  1     var data    site  mysite  name  john  age 25   var template    Welcome you are at  lt   site   gt  This has been created by  lt   name   gt  whose age is  lt   age  gt    var parsedTemplate     template template data   console log parsedTemplate      The result would be  Welcome you are at mysite This has been created by john whose age is 25    2  This is a template      lt script type  text template  id  template 1  gt          lt     each items function item key arr      gt             lt li gt                lt span gt  lt    key   gt  lt  span gt                lt span gt  lt    item name   gt  lt  span gt                lt span gt  lt    item type   gt  lt  span gt              lt  li gt          lt         gt      lt  script gt    This is html   lt div gt     lt ul id  list 2  gt  lt  ul gt   lt  div gt    This is the javascript code which contains json object and putting template into html       var items                        name  name1             type  type1                               name  name1             type  type1                               name  name1             type  type1                               name  name1             type  type1                               name  name1             type  type1                      document  ready function          var template       template 1   html              list 2   html   template template  items items

User · Answer

lt  -- Install jQuery and underscore -- gt    lt script type  text javascript  src  http   code jquery com jquery-1 7 2 min js  gt  lt  script gt   lt script type  text javascript  src  http   documentcloud github com underscore underscore-min js  gt  lt  script gt    lt  -- Create your template -- gt   lt script type  foo bar  id  usageList  gt   lt table cellspacing  0  cellpadding  0  border  1   gt       lt thead gt         lt tr gt           lt th gt Id lt  th gt           lt th gt Name lt  th gt         lt  tr gt       lt  thead gt       lt tbody gt         lt              repeat items            each items function item key list                create variables           var f   item name split     shift   toLowerCase            gt           lt tr gt             lt  -- use variables -- gt             lt td gt  lt    key   gt  lt  td gt             lt td class   lt    f   gt   gt               lt  -- use  - to inject un-sanitized user input  see  Demo of XSS hack   -- gt               lt h3 gt  lt  - item name   gt  lt  h3 gt               lt p gt  lt  - item interests   gt  lt  p gt             lt  td gt           lt  tr gt         lt                       gt       lt  tbody gt     lt  table gt   lt  script gt    lt  -- Create your target -- gt    lt div id  target  gt  lt  div gt    lt  -- Write some code to fetch the data and apply template -- gt    lt script type  text javascript  gt    var items          name  Alexander   interests  creating large empires         name  Edward   interests  ha ckers org  lt  nBGSOUND SRC   javascript alert  XSS      gt          name              name  Yolando   interests  working out         name  Zachary   interests  picking flowers for Angela          var template       usageList   html          target   html   template template  items items      lt  script gt     JsFiddle Thanks  PHearst  JsFiddle  latest  JsFiddle List grouped by first letter  complex example w  images  function calls  sub-templates  fork it  have a blast    JsFiddle Demo of XSS hack noted by  tarun telang below JsFiddle One non-standard method to do sub-templates

User · Answer

with express it s so easy  all what you need is to use the consolidate module on node so you need to install it    npm install consolidate --save   then you should change the default engine to html template by this   app set  view engine    html      register the underscore template engine for the html extension   app engine  html   require  consolidate   underscore     it s done    Now for load for example an template called  index html    res render  index     title    my first page          maybe you will need to install the underscore module    npm install underscore --save   I hope this helped you

[javascript] How to use underscore.js as a template engine?

Examples related to javascript

Examples related to node.js

Examples related to functional-programming

Examples related to underscore.js

Examples related to template-engine