Javascript

Templates





What is it?


    

“A document that contains parameters, identified by some special syntax, that are replaced by actual arguments by the template processing system.”     

It is a fast and efficient technique to render client-side templates with Javascript using a JSON data source                



When to use?



  • Adding or updating new items in lists
  • Loading all data from the server especially in rich list displays
  • Anywhere you need to add new complex content to the page
  • Anything that requires client side HTML rendering

    Example


    <h1>{{title}}</h1>
<ul>
    {{#names}}
        <li>{{name}}</li>
    {{/names}}
</ul> 


     var data = {
    "title": "Story",
    "names": [
        {"name": "Tarzan"},
        {"name": "Jane"}
    ]
}

    Combining the template and data should result in the following HTML 




    <h1>Story</h1>
<ul>    
     <li>Tarzan</li>     <li>Jane</li>
</ul>


    Rails way v/s JT


          • Rails :  Making a JS request and handling response in js.haml or js.erb.
      1. Extra files js.erb or js.haml
      2. Client side logic handled from server side
          • JT: Making a JSON request and handling the response in the same JS file.
      1. Rendering logic handled there itself.
      2. Lets us handle client logic at client side.

    Popular template engines


    1. Mustache
    2. Underscore
    3. Handlebars
    4. EJs
    5. Jade

    Mustache

    • Logic-less, No If else logic
    • Syntax is simple - {{ }}

    Example: Include Templates
    <html>
<body onload="loadUser">
<div id="target">Loading...</div>
<script id="template" type="x-tmpl-mustache">
Hello {{ name }}!
</script>
</body>
</html>
    function loadUser() {
  var template = $('#template').html();
  Mustache.parse(template);   // optional, speeds up future uses
  var rendered = Mustache.render(template, {name: "Luke"});
  $('#target').html(rendered);
}

    Variables


    • A {{name}} tag renders the value of the name key in the current context. 
    • If there is no such key, nothing is rendered.
    • HTML-escaped by default

    View:
    {
  "name": "Chris",
  "company": "<b>GitHub</b>",
  "address":
  {
     city: "Pune",
     state: "Mah"
  }
}
    Template:
    {{name}}
{{age}}
{{company}}
{{{company}}}
{{&company}}
{{address.city}}
    Output:
    Chris

&lt;b&gt;GitHub&lt;/b&gt;
<b>GitHub</b>
<b>GitHub</b>
Pune


    Sections:

               - Nothing but loop


                False Values or Empty Lists



    - null, undefined, false, 0, or NaN, or is an empty string or an empty list, the block will not be rendered

     

    List

    View:
    {
  "stooges": [
    { "name": "Moe" },
    { "name": "Larry" },
    { "name": "Curly" }
  ]
}
    Template:
    {{#stooges}}
<b>{{name}}</b>
{{/stooges}}
    Output:
    <b>Moe</b>
<b>Larry</b>
<b>Curly</b>

    Underscore


    • By default syntax ERB, <%= … %>
    • When using in ERB file <%%= ... %>
    • Can execute Javascript code
    • For mustache styling

     _.templateSettings = {
    evaluate:    /\{\{(.+?)\}\}/g,
    interpolate: /\{\{=(.+?)\}\}/g,
    escape:      /\{\{-(.+?)\}\}/g
};

    View:
    artistArray = ["biggie", "mike", "taylor"];
var listTemplate = _.template($("#listTemplate").html());
listTemplate(listTemplate);
    Template:
    <script id="listTemplate" type="text/template">
  <ul class="artists">
    <%% _.each(artistArray, function(title, index){ %>
      <li data-index="<%%= index %>">
          <%%= title %>
      </li>
    <%% }); %>
  </ul>
</script>
    Output:
       <ul class="artists">
    <li data-index="0"> biggie </li>
    <li data-index="1"> mike </li>
    <li data-index="2"> taylor </li>
  </ul>

    References:


    1. http://en.wikipedia.org/wiki/JavaScript_templating
    2. https://github.com/janl/mustache.js/
    3. http://underscorejs.org/#template
    4. http://www.creativebloq.com/web-design/templating-engines-9134396






    Questions?





    Thank You!

    Made with Slides.com