English
资源说明：JSON Driven Templates
#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:
I have 0 books in my collection and i am currently reading : a book
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:
I have 10 books in my collection and i am currently reading : madness.txt
###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:
I have 0 books in my collection and i am currently reading : a book
name
author
summary
genre
My Bookwtf
Vasil Pupkin|
It's a perfect book to fall asleep
Sleeper
####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:
"class" attribute test
JDT
###Raw HTML
You can request raw html (to paste smth like `link here` 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"}
]
本源码包内暂不包含可直接显示的源代码文件，请下载源码包。
