{"id":3649,"date":"2014-01-02T08:02:21","date_gmt":"2014-01-02T02:32:21","guid":{"rendered":"http:\/\/JitendraZaa.com\/blog\/?p=3649"},"modified":"2014-01-02T08:02:21","modified_gmt":"2014-01-02T02:32:21","slug":"client-side-templating-using-underscore-js-and-jquery","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/client-side-templating-using-underscore-js-and-jquery\/","title":{"rendered":"Client side Templating using Underscore.js and JQuery"},"content":{"rendered":"

Recently, I ran into requirement where I was getting JSON <\/a>response and needed to render it on my Mobile application. I had two Options, Server side processing and Client side Templating. I studied and checked both way ; came to conclusion on using Client side Templating. There are many plugins and libraries available however there is one which stands different, easy to use and faster as compared to others which is “Underscore.js<\/a>“.<\/p>\n

Underscore.js library needs JQuery as prerequisite. You can find complete documentation here<\/a>, Only remember following three points :<\/p>\n

    \n
  1. <% %> – to execute some code<\/li>\n
  2. <%= %> – to print some value in template<\/li>\n
  3. <%- %> – to print some values with HTML escaped<\/li>\n<\/ol>\n

    Example Source code:<\/strong><\/p>\n

    Below Example shows how to render JSON in tabular format using Underscore.js and JQuery.<\/p>\n

    \n<html>\n<head>\n\t<title>\n\t\tDemo of Templating using underscore.js\n\t<\/title>\n\n<style type="text\/css">\n.outer {\n    border-collapse: collapse;\n    font: 12px\/16px arial, sans-serif;\n    margin: 20px;\n    padding: 0;\n\t}\n\n.outer td, .outer th {\n    border: solid 1px #ddd;\n    margin: 0;\n    padding: 5px;\n}\n\n.outer th, .outer div.th {\n    background: #EEE;\n    font-weight: bold;\n}\n<\/style>\n\n<\/head>\n\n<body>\n\n<table class="outer">\n    <thead>\n        <tr>\n            <th>Sr. No<\/th>\n            <th>Name<\/th>\n        <\/tr>\n    <\/thead>\n    <tbody>\n    <\/tbody>\n<\/table>\n\n<script type="text\/html" id='table-data'>\n    <% _.each(items,function(item,key,list){ %>\n        <tr>\n            <td><%= key+1 %><\/td>\n            <td><%= item.name %><\/td>\n        <\/tr>\n    <% }) %>\n\n<\/script>\n\n\t<script type="text\/JavaScript"\n\nsrc="http:\/\/code.jquery.com\/jquery-1.10.2.min.js"\n\n><\/script>\n\t<script type="text\/JavaScript"\n\nsrc="http:\/\/underscorejs.org\/underscore-min.js" ><\/script>\n\n\t<script type="text\/JavaScript" >\n\tvar items = [\n\t\t{name:"Shivasoft"},\n\t\t{name:"Salesforce"},\n\t\t{name:"JQuery"},\n\t\t{name:"UnderscoreJS"},\n\t\t{name:"Template"},\n\t\t{name:"Client Side Templating"}\n\t]\n\n\tvar tableTemplate = $("#table-data").html();\n\n\t$("table.outer tbody").html(_.template( tableTemplate,{items:items} ));\n\n\t<\/script>\n\n<\/body>\n\n<\/html>\n<\/pre>\n
    Output:<\/strong><\/p>\n
    \"Underscore.js\"<\/a>
    Underscore.js<\/figcaption><\/figure>\n
    How it Works ?<\/strong><\/p>\n
      \n
    1. Line 31, we are going to append data in this table.<\/li>\n
    2. Line 42-48, defines template on how we are going to render JSON values. We are looping through values and rendering in “td” tag of “table”.<\/li>\n
    3. Line 73, Single line is doing the magic here. It is getting template which is defined between line 42 and 48 and then rendering values in table defined at line 31.<\/li>\n<\/ol>\n
      Please leave comment for feedback.<\/p>\n","protected":false},"excerpt":{"rendered":"
      Recently, I ran into requirement where I was getting JSON response and needed to render it on my Mobile application. I had two Options, Server side processing and Client side Templating. I studied and checked both way ; came to conclusion on using Client side Templating. There are many plugins and libraries available however there […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[26,9],"tags":[134,194,206,207],"class_list":["post-3649","post","type-post","status-publish","format-standard","hentry","category-web","category-salesforce","tag-jquery","tag-template","tag-underscore","tag-underscore-js"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":2843,"url":"https:\/\/www.jitendrazaa.com\/blog\/others\/tips\/streaming-api-using-jquery-salesforce\/","url_meta":{"origin":3649,"position":0},"title":"Streaming API Using JQuery – Salesforce","author":"Jitendra","date":"May 6, 2012","format":false,"excerpt":"Tutorial of Streaming API in Salesforce with Source code and Demo Video - Implementation of Bayeux protocol and CometD using JQuery and JSON","rel":"","context":"In "Tech Tips"","block_context":{"text":"Tech Tips","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/others\/tips\/"},"img":{"alt_text":"Salesforce Streaming API - Create Push topic","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/05\/Salesforce-Streaming-API-Create-Push-topic-1024x332.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/05\/Salesforce-Streaming-API-Create-Push-topic-1024x332.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/05\/Salesforce-Streaming-API-Create-Push-topic-1024x332.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":4063,"url":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/why-to-use-bower-for-your-web-developement\/","url_meta":{"origin":3649,"position":1},"title":"Why to use Bower for your web developement","author":"Jitendra","date":"November 23, 2014","format":false,"excerpt":"What is Bower It is client side package Manager and Great tool to manage all you web dependencies like JavaScript libraries and other assets. What can be done from Bower Web sites are made of lots of things \u2014 frameworks, libraries, assets, utilities, and rainbows. Bower manages all these things\u2026","rel":"","context":"In "Node.js"","block_context":{"text":"Node.js","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/others\/node-js\/"},"img":{"alt_text":"Bower","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/11\/bower-logo-150x150.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":3762,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/salesforce-rest-api-playground\/","url_meta":{"origin":3649,"position":2},"title":"Salesforce REST API Playground","author":"Jitendra Zaa","date":"February 25, 2014","format":false,"excerpt":"What is REST API ? In my words, Getting data from Other System or Same System using HTTP request is known as REST API. If you know, how website works, you know REST API. Before REST API, there was SOAP request which needed lots of configuration and very tightly coupled.\u2026","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"REST API playground in Salesforce","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/02\/REST-API-playground-in-Salesforce-1024x362.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/02\/REST-API-playground-in-Salesforce-1024x362.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/02\/REST-API-playground-in-Salesforce-1024x362.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":65,"url":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/web\/highlight-current-field-using-jquery\/","url_meta":{"origin":3649,"position":3},"title":"Highlight Current field using JQuery","author":"Jitendra","date":"May 10, 2010","format":false,"excerpt":"Write below HTML code : This will create two text boxes. [sourcecode lang=\"css\"]