Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 

#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

I have 10 books in my collection and i am currently reading : madness.txt
name author summary genre
Amber 1 Zheliazny Plasmazny Zemlianyj The Amber story - book 1 science-fiction
Amber 2 Zheliazny The Amber story - book 2 science-fiction
Amber 3 Zheliazny The Amber story - book 3 science-fiction
Amber 4 Zheliazny The Amber story - book 4 science-fiction
Amber 5 Zheliazny The Amber story - book 5 science-fiction

##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:

input value test

###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": "link here"} ]
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"} ]

About

JSON Driven Templates

Resources

Releases

No releases published

Packages

No packages published