Samples Documentation About
“Simplicity is the Ultimate Sophistication” Leonardo Da Vinci

What is xJson?

xJson a super-simple templating engine that is fast, tiny (less than 2kB when compressed) and easy to use.

xJson can 'Read' and 'Write' JSON data throught your usual HTML tags by using data-attributes paradigm.



HTML attributes paradigm

data-value: set HTML tag's value/text with JSON object's property
data-class: set HTML tag's class with JSON object's property
data-attr: set HTML tag's attributes with JSON object's property


Javascript methods paradigm

xJson.Write: Bind data into HTML tags
xJson.Read: Read data from HTML tags


The same tiny good example :)

data-value, data-class, data-attr

<div id="view" data-class="sex">
	<label data-value="first" data-attr="title" data-attr-value="email" ></label>
	<b data-value="lastname"></b><br />
</div>

data-value: name of JSON object's property
The property will be bound as HTML tag's value or text.

data-class: name of JSON object's property
The property will be added as HTML tag's class (css).

data-attr: name of HTML tag's attribute
data-attr should be used with data-attr-value.
HTML tag's attribute will be bound with the JSON object's property indicated by data-attr-value.

xJson.Write($target, data, [$template]))

$target: jQuery Object
If $template is specified, it will be $cloned and then will be bound with data. $clone will be append into the $target.
If $template is not specified (or null), data will be bound directly into the $target.

data: JSON object or array of JSON objects.
Example of single JSON object:
{ firstname: 'Elon', lastname: 'Musk' }

Example of an array of JSON objects:
[
	{ firstname: 'Elon', lastname: 'Musk' },
	{ firstname: 'Jeff', lastname: 'Bezos' },
	{ firstname: 'Jack', lastname: 'Ma' }
]

$template (optional): jQuery Object
$template will be cloned and bound with data. The cloned $template will be append into the $target.

Return: $clone (of $template if the latter is specified) or $target

xJson.Read($target)

$target: jQuery Object
Data will be collected from the $target.

Return: data (json format)

Last update: 2018-01-13

You can find more details and examples in the samples.