Skip to content

Commit

Permalink
Deprecated tag & children attributes
Browse files Browse the repository at this point in the history 
Deprecated tag & children attributes : '<>' to be used instead of 'tag'
and 'html' to be used instead of 'children'.
  • Loading branch information
@moappi
moappi committed Apr 27, 2016
1 parent 8870dd5 commit 1878bac
Show file tree
Hide file tree
Showing 5 changed files with 78 additions and 60 deletions.
4 changes: 2 additions & 2 deletions README.md
View file
Expand Up @@ -27,8 +27,8 @@ Example
Transform (template)
```javascript
var transform =
{"tag": "li", "id":"${id}", children:[
{"tag": "span", "html": "${name} (${year})"}
{"<>": "li", "id":"${id}", "html":[
{"<>": "span", "html": "${name} (${year})"}
]};
```
Plus JSON Data
Expand Down
8 changes: 4 additions & 4 deletions examples/example.escape.js
View file
Expand Up @@ -5,10 +5,10 @@
var test_data2 = {"test1":"<b>escape HTML test</b>", "test2":"<b>escape HTML test</b>"};

var transform = [
{"tag":"input", "html":"", "value":"${test1}"},
{"tag":"input", "html":"", "value":"${test2}"},
{"tag":"textarea", "html":"${test1}"},
{"tag":"textarea", "html":"${test2}"},
{"<>":"input", "html":"", "value":"${test1}"},
{"<>":"input", "html":"", "value":"${test2}"},
{"<>":"textarea", "html":"${test1}"},
{"<>":"textarea", "html":"${test2}"},
];


Expand Down
23 changes: 12 additions & 11 deletions examples/example.nested.js
View file
@@ -1,18 +1,19 @@

//Test nested dynamic children
// calls json2html recusively
var nested = {"Name": "Parent", "Children": [{"Name": "Child1"}, {"Name": "Child1"}]};
var nested = {"name":"parent", "children": [{"name": "child1"}, {"name": "child2"}]};

var transform_parent = [
{"tag":"span", "html":"${Name}"},
{"tag":"ul", children:function(){return(json2html.transform(this.Children, transform_child));}}
];
var transforms = {
"parent":[
{"<>":"span", "html":"${name}"},
{"<>":"ul","html":function(){return(json2html.transform(this.children, transforms.child));}}
],

var transform_child =
{"tag":"li", children:[
{"tag": "b", "html":"${Name}"}
]};
var html = json2html.transform(nested,transform_parent);
"child":{"<>":"li", children:[
{"<>": "b", "html":"${name}"}
]}
};

var html = json2html.transform(nested,transforms.parent);

document.write('<h1>Nested Test</h1>'+ html);
34 changes: 17 additions & 17 deletions examples/example.shorthand.js
View file
Expand Up @@ -2,27 +2,27 @@
//Test the short hand notation
// as well as the direct reference via this
var movies = [
{ "Name": "The Red Violin", "ReleaseYear": "1998" },
{ "Name": "The blue Violin", "ReleaseYear": "1998" },
{ "Name": "The yellow Violin", "ReleaseYear": "1998" },
{ "Name": "The purple Violin", "ReleaseYear": "1998" },
{ "Name": "The orange Violin", "ReleaseYear": "1998" }
{ "name": "The Red Violin", "year": "1998" },
{ "name": "The blue Violin", "year": "1999" },
{ "name": "The yellow Violin", "year": "2000" },
{ "name": "The purple Violin", "year": "2010" },
{ "name": "The orange Violin", "year": "2015" }
];

var transform_shortHand =
{"tag": "li", "children": [
{"tag":"b", "html":"${Name}"},
{"tag":"span", "html":"${ReleaseYear}"}
]};
var transforms = {
"shorthand":{"<>": "li", "children": [
{"<>":"b", "html":"${name}"},
{"<>":"span", "html":"${year}"}
]},

var transform_longHand =
{"tag": "li", children: [
{"tag": "b", "html": function(){return(this.Name);}},
{"tag": "span", "html": function(){return(this.ReleaseYear);}}
]};
"longhand":{"<>": "li", children: [
{"<>": "b", "html": function(){return(this.name);}},
{"<>": "span", "html": function(){return(this.year);}}
]}
};

var html1 = json2html.transform(movies,transform_shortHand);
var html1 = json2html.transform(movies,transforms.shorthand);

var html2 = json2html.transform(movies,transform_longHand);
var html2 = json2html.transform(movies,transforms.longhand);

document.write('<h1>Shorthand Test</h1>'+ html1 + '<br><br>' + html2);
69 changes: 43 additions & 26 deletions json2html.js
View file
@@ -1,4 +1,4 @@
//Copyright (c) 2013 Crystalline Technologies
//Copyright (c) 2016 Crystalline Technologies
//
// Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'),
// to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
Expand Down Expand Up @@ -109,14 +109,20 @@ var json2html = {
}

} else if(typeof transform === 'object') {

//Get the tag element of this transform
if( transform.tag !== undefined ) {

var tag = json2html._getValue(obj,transform,'tag',index);


var _element = '<>';

//Add legacy support for tag
if(transform[_element] === undefined) _element = 'tag';

//Check to see if we have a valid element name
if( transform[_element] !== undefined ) {

//Get the element name (this can be tokenized)
var name = json2html._getValue(obj,transform,_element,index);

//Create a new element
element.html += '<' + tag;
element.html += '<' + name;

//Create a new object for the children
var children = {'events':[],'html':''};
Expand All @@ -128,24 +134,36 @@ var json2html = {
for (var key in transform) {

switch(key) {

//LEGACY support for tag
case 'tag':
//Do nothing as we have already created the element from the tag
case '<>':
//Do nothing as we have already created the element
break;

//LEGACY support for children
case 'children':
//Add the children
if(json2html._isArray(transform.children)) {
case 'html':

//Get the transform value associated with this key
// added as key could be children or html
var _transform = transform[key];

//Determine what kind of object this is
// array & function => children
// other => html
if(json2html._isArray(_transform)) {

//Apply the transform to the children
children = json2html._append(children,json2html._apply(obj, transform.children, index, options));
} else if(typeof transform.children === 'function') {
children = json2html._append(children,json2html._apply(obj, _transform, index, options));
} else if(typeof _transform === 'function') {

//Get the result from the function
var temp = transform.children.call(obj, obj, index);
var temp = _transform.call(obj, obj, index);

//Make sure we have an object result with the props
// html (string), events (array)
// OR a string (then just append it to the children
// OR a string (then just append it to the children)
if(typeof temp === 'object') {
//make sure this object is a valid json2html response object
if(temp.html !== undefined && temp.events !== undefined) children = json2html._append(children,temp);
Expand All @@ -154,12 +172,11 @@ var json2html = {
//append the result directly to the html of the children
children.html += temp;
}
}
break;
} else {

case 'html':
//Create the html attribute for this element
html = json2html._getValue(obj,transform,'html',index);
//Create the html attribute for this element
html = json2html._getValue(obj,transform,key,index);
}
break;

default:
Expand Down Expand Up @@ -207,15 +224,15 @@ var json2html = {
if(typeof val === 'string') out = '"' + val.replace(/"/g, '&quot;') + '"';
else out = val;

//creat the name value pair
element.html += ' ' + key + '=' + out;
//create the name value pair
element.html += ' ' + key + '=' + out;
}
}
break;
}
}

//close the opening tag
//close the opening element
element.html += '>';

//add the innerHTML (if we have any)
Expand All @@ -224,8 +241,8 @@ var json2html = {
//add the children (if we have any)
element = json2html._append(element,children);

//add the closing tag
element.html += '</' + tag + '>';
//add the closing element
element.html += '</' + name + '>';
}
}

Expand Down

0 comments on commit 1878bac

Please sign in to comment.