Documentation

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.