Render JSON Data To HTML Using Itemtemplate.JS

Introduction

This article is an introduction on ItemTemplateJS.



Well if you are a .NET developer, you must have got an idea of what this JavaScript is all about. The ItemTemplate.js helps one bind JSON objects to HTML with ease, it is as simple as binding a GridView or a Repeater, all you need is to supply JSON object to the datasource.

While using this JavaScript you might find to quite similar to AngularJS but its not Angular, I mean its not as huge as Angular.

ItemTemplate.js only renders data on to html.

Directions to use ItemTemplateJS

1. HTML
   
   In the following examples the HTML has an attribute itemtemplate, basically used to identify the part of the html that has to be repeated and replaces all the elements within {{ }} in the itemtemplate.  

   @*For Table*@
      <table id="grid">
          <tr>
              <td>ID</td>
              <td>Name</td>
              <td>Age</td>
              <td>Gender</td>
              <td>Location</td>
          </tr>
          <tr itemtemplate="true">
              <td>
                  <a href="javascript:EditPerson({{Id}});">
                      {{Id}}
                  </a>
              </td>
              <td>
                  {{Name}}
              </td>
              <td>
                  {{Age}}
              </td>
              <td>
                  {{Gender}}
              </td>
              <td>
                  {{Location}}
              </td>
          </tr>
      </table>
   
      @*For Select*@
      <select id="ddlSelect">
          <option value="0">Select</option>
          <option itemtemplate="true" value="{{Id}}">
              {{Name}}/{{Age}}}/{{Gender}}/{{Location}}
          </option>
      </select>
   
      @*For List*@
      <ol id="oList">
          <li itemtemplate="true" data-value="{{Id}}">
              {{Name}} {{Age}}} {{Gender}} {{Location}}
          </li>
      </ol>
   
      @*For AnyCustomHTML*@
      <div id="divRpt">
          <div itemtemplate="true">
              {{index}}
              <br />
              {{Name}} {{Age}}} {{Gender}} {{Location}}
          </div>
      </div>

2. JQuery
   
   Now to bind the control all you need to do is the following:
   

   $.post('/Home/SelectPeople', '{}', function(result) {
       //Applying the result to the HTML
       //the result object is applied to option dataSource
   
       $('#grid').itemTemplate({
           dataSource: result
       });
       $('#ddlSelect').itemTemplate({
           dataSource: result
       });
       $('#oList').itemTemplate({
           dataSource: result
       });
       $('#divRpt').itemTemplate({
           dataSource: result
       });
   });

So here we have finished binding an HTML element with data using the ItemTemplateJS.

Note: This JS requires JQuery 1.6 or higher

Well the ItemTemplateJS isn't that perfect, like for example it doesn't work with nested itemTemplates and I have been working on it for quite sometime. So if anyone find any imperfections or any scope for enhancements please feel free to comment.

That's all for this article.