Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

JSON Driven Tamplates

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 jdt.js
Octocat-spinner-32 readme.md
Octocat-spinner-32 test-case.html
readme.md

Overview

JDT stands for "JSON Driven templates", it is a tool for applying data presented in JSON hash on html structure, following the certain markup structure, defined by sequence on classes. Html elements are placeholders for data, each of them have certain class which is "key" in JSON array so JDT knows where to place certain value.

So you have your data separated from presentation even more: html file shows how data is structured, JDT puts data in, CSS tells how this all stuff should look like.

Why?

It makes life easier so you can write down one single line of markup example and JSON hash applied to it and all that will give you page with table full of data, i.e. Needs in JDT are quite simple: you have tool that can give you possibility to show your data without page reload using small chunk of html basing on JSON server response.

Usage

Simple example:

var json_data = { 
 'library' : {
   'statistics' : { 'books-count':'10', 'currently-reading':'madness.txt'}
}

This hash will fill with data html markup similar to following:

<div class="advanced_test library">
  <div class="statistics">
    I have <span class="books-count">0</span> books in my collection and i am currently reading : <span class="currently-reading">a book</span>
  </div>
</div>

Notice that level of nesting doesn't matter: div.statistics might be any level deeper into div.library and JDT will handle it. Main point is that selectors structure must be respected.

JDT processing can be launched with JDT.process(json_data);

So result of code listed above will look like:

<div class="advanced_test library">
  <div class="statistics">
    I have <span class="books-count">10</span> books in my collection and i am currently reading : <span class="currently-reading">madness.txt</span>
  </div>
</div>

More complicated example:

js:

var json_data = { 
 'library' : {
   'statistics' : { 'books-count':'10', 'currently-reading':'madness.txt'},
   'books' : [
     {'name' : 'Amber 1', 'authors' : ['Zheliazny', 'Plasmazny', 'Zemlianyj'], 'summary':'The Amber story - book 1', 'genre' : 'science-fiction'},
     {'name' : 'Amber 2', 'authors' : ['Zheliazny'], 'summary':'The Amber story - book 2', 'genre' : 'science-fiction'},
     {'name' : 'Amber 3', 'authors' : ['Zheliazny'], 'summary':'The Amber story - book 3', 'genre' : 'science-fiction'},
     {'name' : 'Amber 4', 'authors' : ['Zheliazny'], 'summary':'The Amber story - book 4', 'genre' : 'science-fiction'},
     {'name' : 'Amber 5', 'authors' : ['Zheliazny'], 'summary':'The Amber story - book 5', 'genre' : 'science-fiction'}
   ],
   'there' : 'is-no-such'
 }
}
JDT.process(json_data);

HTML:

<div class="advanced_test library">
  <div class="statistics">
   I have <span class="books-count">0</span> books in my collection and i am currently reading : <span class="currently-reading">a book</span>
  </div>
  <table class="books">
    <tr class="listing-header">
      <th>name</th>
      <th>author</th>
      <th>summary</th>
      <th>genre</th>
    </tr>
    <tr class="book item">
      <td class="name"><span class="value">My Book</span><span class="item">wtf</span></td>
      <td class="authors"><em class="item">Vasil Pupkin</em><span class="delimiter">|</span></td>
      <td class="summary">It's a perfect book to fall asleep</td>
      <td class="genre">Sleeper</td>
    </tr>
    <tr class="book item">
      <td class="name">
        <span class="value"></span>
      </td>
      <td class="authors">
        <em class="item"></em>
        <span class="delimiter"></span>
      </td>
      <td class="summary"></td>
      <td class="genre"></td>
    </tr>
  </table>
</div>

Result

<div class="advanced_test library">
  <div class="statistics">
    I have <span class="books-count">10</span> books in my collection and i am currently reading : <span class="currently-reading">madness.txt</span>
  </div>
  <table class="books">
    <tbody>
      <tr class="listing-header">
        <th>name</th>
        <th>author</th>
        <th>summary</th>
        <th>genre</th>
      </tr>
      <tr class="book item">
        <td class="name">
          <span class="value">Amber 1</span>
        </td>
        <td class="authors">
          <em class="item">Zheliazny</em>
          <em class="item">Plasmazny</em>
          <em class="item">Zemlianyj</em></td>
        <td class="summary">The Amber story - book 1</td>
        <td class="genre">science-fiction</td>
      </tr>
      <tr class="book item">
        <td class="name">
          <span class="value">Amber 2</span>
        </td>
        <td class="authors">
          <em class="item">Zheliazny</em></td>
        <td class="summary">The Amber story - book 2</td>
        <td class="genre">science-fiction</td>
      </tr>
      <tr class="book item">
        <td class="name">
          <span class="value">Amber 3</span>
        </td>
        <td class="authors">
          <em class="item">Zheliazny</em></td>
        <td class="summary">The Amber story - book 3</td>
        <td class="genre">science-fiction</td>
      </tr>
      <tr class="book item">
        <td class="name">
          <span class="value">Amber 4</span>
        </td>
        <td class="authors">
          <em class="item">Zheliazny</em></td>
        <td class="summary">The Amber story - book 4</td>
        <td class="genre">science-fiction</td>
      </tr>
      <tr class="book item">
        <td class="name">
          <span class="value">Amber 5</span>
        </td>
        <td class="authors">
          <em class="item">Zheliazny</em></td>
        <td class="summary">The Amber story - book 5</td>
        <td class="genre">science-fiction</td>
      </tr>
    </tbody>
  </table>
</div>

Usage variations

Inputs

You can also use inputs so their values will be changed properly.

js:

container = jQuery(".input-test");
data = {'color' : 'red', 'size' : 15 }
JDT.process(data, container);

html:

<div class="input-test">    
  <h2>input value test</h2>
  <span class="color"><input class="value" type="text" value="blue-template" /></span>
  <input class="size" type="text" value="10-template" />
</div>

Attributes

Or use JDT not only for text replacing. I.e. for assigning classes for elements.

js:

class_attribute_data = [
  {"object":{"class":"red"}},
  {"object":{"class":"green"}},
  {"object":{"class":"blue"}},
  {"object":{"class":"black"}}
]  
JDT.process(class_attribute_data, jQuery('.class-attribute-test')); 

html:

<div class="class-attribute-test">
  <h2>"class" attribute test</h2>
  <div class="item object">
    JDT
  </div>
</div>

Raw HTML

You can request raw html (to paste smth like <a href="#">link here</a> but not just plain text). So just add true at the end of JDT.process call

js:

link_hash = [
  {"link": "<a href='#'>link here</a>"}
]  
JDT.process(link_hash, jQuery('.link-wrapper'), true); 

JSON creation rules

  • Do not put extra comma ',' after last hash item (IE crashes because of it)

Wrong:

json_data = [
  {"key":"value1"},
  {"key":"value2"},
]  

Right:

json_data = [
  {"key":"value1"},
  {"key":"value2"}
]  
Something went wrong with that request. Please try again.