{"id":19010346,"url":"https://github.com/railsware/jdt","last_synced_at":"2025-04-22T23:14:56.285Z","repository":{"id":66242352,"uuid":"762191","full_name":"railsware/jdt","owner":"railsware","description":"JSON Driven Templates","archived":false,"fork":false,"pushed_at":"2011-05-12T17:05:20.000Z","size":795,"stargazers_count":7,"open_issues_count":1,"forks_count":5,"subscribers_count":50,"default_branch":"master","last_synced_at":"2025-04-22T23:14:49.637Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/railsware.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2010-07-07T17:02:48.000Z","updated_at":"2019-08-20T09:31:26.000Z","dependencies_parsed_at":"2023-02-20T00:40:23.465Z","dependency_job_id":null,"html_url":"https://github.com/railsware/jdt","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/railsware%2Fjdt","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/railsware%2Fjdt/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/railsware%2Fjdt/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/railsware%2Fjdt/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/railsware","download_url":"https://codeload.github.com/railsware/jdt/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250337950,"owners_count":21414104,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-08T19:10:57.128Z","updated_at":"2025-04-22T23:14:56.268Z","avatar_url":"https://github.com/railsware.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"#Overview\nJDT 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.\nHtml 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.\n\nSo 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.\n\n#Why?\nIt 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.\nNeeds 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.\n\n\n#Usage \n\n###Simple example:\n\n    var json_data = { \n     'library' : {\n       'statistics' : { 'books-count':'10', 'currently-reading':'madness.txt'}\n    }\n\nThis hash will fill with data html markup similar to following:\n\n    \u003cdiv class=\"advanced_test library\"\u003e\n      \u003cdiv class=\"statistics\"\u003e\n        I have \u003cspan class=\"books-count\"\u003e0\u003c/span\u003e books in my collection and i am currently reading : \u003cspan class=\"currently-reading\"\u003ea book\u003c/span\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n\nNotice 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.\n\nJDT processing can be launched with \n  `JDT.process(json_data);`\n\nSo result of code listed above will look like:\n\n    \u003cdiv class=\"advanced_test library\"\u003e\n      \u003cdiv class=\"statistics\"\u003e\n        I have \u003cspan class=\"books-count\"\u003e10\u003c/span\u003e books in my collection and i am currently reading : \u003cspan class=\"currently-reading\"\u003emadness.txt\u003c/span\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n\n\n\n###More complicated example:\n\n####js:\n\n    var json_data = { \n     'library' : {\n       'statistics' : { 'books-count':'10', 'currently-reading':'madness.txt'},\n       'books' : [\n         {'name' : 'Amber 1', 'authors' : ['Zheliazny', 'Plasmazny', 'Zemlianyj'], 'summary':'The Amber story - book 1', 'genre' : 'science-fiction'},\n         {'name' : 'Amber 2', 'authors' : ['Zheliazny'], 'summary':'The Amber story - book 2', 'genre' : 'science-fiction'},\n         {'name' : 'Amber 3', 'authors' : ['Zheliazny'], 'summary':'The Amber story - book 3', 'genre' : 'science-fiction'},\n         {'name' : 'Amber 4', 'authors' : ['Zheliazny'], 'summary':'The Amber story - book 4', 'genre' : 'science-fiction'},\n         {'name' : 'Amber 5', 'authors' : ['Zheliazny'], 'summary':'The Amber story - book 5', 'genre' : 'science-fiction'}\n       ],\n       'there' : 'is-no-such'\n     }\n    }\n    JDT.process(json_data);\n\n####HTML:\n\n    \u003cdiv class=\"advanced_test library\"\u003e\n      \u003cdiv class=\"statistics\"\u003e\n       I have \u003cspan class=\"books-count\"\u003e0\u003c/span\u003e books in my collection and i am currently reading : \u003cspan class=\"currently-reading\"\u003ea book\u003c/span\u003e\n      \u003c/div\u003e\n      \u003ctable class=\"books\"\u003e\n        \u003ctr class=\"listing-header\"\u003e\n          \u003cth\u003ename\u003c/th\u003e\n          \u003cth\u003eauthor\u003c/th\u003e\n          \u003cth\u003esummary\u003c/th\u003e\n          \u003cth\u003egenre\u003c/th\u003e\n        \u003c/tr\u003e\n        \u003ctr class=\"book item\"\u003e\n          \u003ctd class=\"name\"\u003e\u003cspan class=\"value\"\u003eMy Book\u003c/span\u003e\u003cspan class=\"item\"\u003ewtf\u003c/span\u003e\u003c/td\u003e\n          \u003ctd class=\"authors\"\u003e\u003cem class=\"item\"\u003eVasil Pupkin\u003c/em\u003e\u003cspan class=\"delimiter\"\u003e|\u003c/span\u003e\u003c/td\u003e\n          \u003ctd class=\"summary\"\u003eIt's a perfect book to fall asleep\u003c/td\u003e\n          \u003ctd class=\"genre\"\u003eSleeper\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr class=\"book item\"\u003e\n          \u003ctd class=\"name\"\u003e\n            \u003cspan class=\"value\"\u003e\u003c/span\u003e\n          \u003c/td\u003e\n          \u003ctd class=\"authors\"\u003e\n            \u003cem class=\"item\"\u003e\u003c/em\u003e\n            \u003cspan class=\"delimiter\"\u003e\u003c/span\u003e\n          \u003c/td\u003e\n          \u003ctd class=\"summary\"\u003e\u003c/td\u003e\n          \u003ctd class=\"genre\"\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n      \u003c/table\u003e\n    \u003c/div\u003e\n\n####Result\n    \u003cdiv class=\"advanced_test library\"\u003e\n      \u003cdiv class=\"statistics\"\u003e\n        I have \u003cspan class=\"books-count\"\u003e10\u003c/span\u003e books in my collection and i am currently reading : \u003cspan class=\"currently-reading\"\u003emadness.txt\u003c/span\u003e\n      \u003c/div\u003e\n      \u003ctable class=\"books\"\u003e\n        \u003ctbody\u003e\n          \u003ctr class=\"listing-header\"\u003e\n            \u003cth\u003ename\u003c/th\u003e\n            \u003cth\u003eauthor\u003c/th\u003e\n            \u003cth\u003esummary\u003c/th\u003e\n            \u003cth\u003egenre\u003c/th\u003e\n          \u003c/tr\u003e\n          \u003ctr class=\"book item\"\u003e\n            \u003ctd class=\"name\"\u003e\n              \u003cspan class=\"value\"\u003eAmber 1\u003c/span\u003e\n            \u003c/td\u003e\n            \u003ctd class=\"authors\"\u003e\n              \u003cem class=\"item\"\u003eZheliazny\u003c/em\u003e\n              \u003cem class=\"item\"\u003ePlasmazny\u003c/em\u003e\n              \u003cem class=\"item\"\u003eZemlianyj\u003c/em\u003e\u003c/td\u003e\n            \u003ctd class=\"summary\"\u003eThe Amber story - book 1\u003c/td\u003e\n            \u003ctd class=\"genre\"\u003escience-fiction\u003c/td\u003e\n          \u003c/tr\u003e\n          \u003ctr class=\"book item\"\u003e\n            \u003ctd class=\"name\"\u003e\n              \u003cspan class=\"value\"\u003eAmber 2\u003c/span\u003e\n            \u003c/td\u003e\n            \u003ctd class=\"authors\"\u003e\n              \u003cem class=\"item\"\u003eZheliazny\u003c/em\u003e\u003c/td\u003e\n            \u003ctd class=\"summary\"\u003eThe Amber story - book 2\u003c/td\u003e\n            \u003ctd class=\"genre\"\u003escience-fiction\u003c/td\u003e\n          \u003c/tr\u003e\n          \u003ctr class=\"book item\"\u003e\n            \u003ctd class=\"name\"\u003e\n              \u003cspan class=\"value\"\u003eAmber 3\u003c/span\u003e\n            \u003c/td\u003e\n            \u003ctd class=\"authors\"\u003e\n              \u003cem class=\"item\"\u003eZheliazny\u003c/em\u003e\u003c/td\u003e\n            \u003ctd class=\"summary\"\u003eThe Amber story - book 3\u003c/td\u003e\n            \u003ctd class=\"genre\"\u003escience-fiction\u003c/td\u003e\n          \u003c/tr\u003e\n          \u003ctr class=\"book item\"\u003e\n            \u003ctd class=\"name\"\u003e\n              \u003cspan class=\"value\"\u003eAmber 4\u003c/span\u003e\n            \u003c/td\u003e\n            \u003ctd class=\"authors\"\u003e\n              \u003cem class=\"item\"\u003eZheliazny\u003c/em\u003e\u003c/td\u003e\n            \u003ctd class=\"summary\"\u003eThe Amber story - book 4\u003c/td\u003e\n            \u003ctd class=\"genre\"\u003escience-fiction\u003c/td\u003e\n          \u003c/tr\u003e\n          \u003ctr class=\"book item\"\u003e\n            \u003ctd class=\"name\"\u003e\n              \u003cspan class=\"value\"\u003eAmber 5\u003c/span\u003e\n            \u003c/td\u003e\n            \u003ctd class=\"authors\"\u003e\n              \u003cem class=\"item\"\u003eZheliazny\u003c/em\u003e\u003c/td\u003e\n            \u003ctd class=\"summary\"\u003eThe Amber story - book 5\u003c/td\u003e\n            \u003ctd class=\"genre\"\u003escience-fiction\u003c/td\u003e\n          \u003c/tr\u003e\n        \u003c/tbody\u003e\n      \u003c/table\u003e\n    \u003c/div\u003e\n\n\n##Usage variations\n\n###Inputs\n\nYou can also use inputs so their values will be changed properly.\n\n####js:\n    container = jQuery(\".input-test\");\n    data = {'color' : 'red', 'size' : 15 }\n    JDT.process(data, container);\n\n\n####html: \n    \u003cdiv class=\"input-test\"\u003e\t\n      \u003ch2\u003einput value test\u003c/h2\u003e\n      \u003cspan class=\"color\"\u003e\u003cinput class=\"value\" type=\"text\" value=\"blue-template\" /\u003e\u003c/span\u003e\n      \u003cinput class=\"size\" type=\"text\" value=\"10-template\" /\u003e\n    \u003c/div\u003e\n\n###Attributes\n\nOr use JDT not only for text replacing. I.e. for assigning classes for elements.\n\n####js:\n    class_attribute_data = [\n      {\"object\":{\"class\":\"red\"}},\n      {\"object\":{\"class\":\"green\"}},\n      {\"object\":{\"class\":\"blue\"}},\n      {\"object\":{\"class\":\"black\"}}\n    ]  \n    JDT.process(class_attribute_data, jQuery('.class-attribute-test')); \n\n####html:\n\n    \u003cdiv class=\"class-attribute-test\"\u003e\n      \u003ch2\u003e\"class\" attribute test\u003c/h2\u003e\n      \u003cdiv class=\"item object\"\u003e\n        JDT\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \n###Raw HTML\n\nYou can request raw html (to paste smth like `\u003ca href=\"#\"\u003elink here\u003c/a\u003e` but not just plain text). So just add `true` at the end of `JDT.process` call\n\n####js:\n    link_hash = [\n      {\"link\": \"\u003ca href='#'\u003elink here\u003c/a\u003e\"}\n    ]  \n    JDT.process(link_hash, jQuery('.link-wrapper'), true); \n  \n\n##JSON creation rules\n\n- Do not put extra comma ',' after last hash item (IE crashes because of it)\n\n####Wrong:\n    json_data = [\n      {\"key\":\"value1\"},\n      {\"key\":\"value2\"},\n    ]  \n\n####Right:\n    json_data = [\n      {\"key\":\"value1\"},\n      {\"key\":\"value2\"}\n    ]  \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frailsware%2Fjdt","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frailsware%2Fjdt","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frailsware%2Fjdt/lists"}