Skip to content
jQuery/JavaScript JsonML Plugin
Find file
Latest commit f2d249e Nov 25, 2013 @cdrubin cdrubin committed with Update jquery.jqml.js
To avoid failing on empty arrays
Failed to load latest commit information.
src Update jquery.jqml.js Dec 6, 2013
test Add page for testing Dec 12, 2012 Add array in array support Oct 8, 2012

jqml - jQuery/JavaScript JsonML Translator

In src/ you will find the following files:

  • jqml.js - Create DOM from JsonML, requires no additional libraries.
  • jqml.min.js - Minified jqml.js.
  • jquery.jqml.js - jqml implementation specific to jQuery.
  • jquery.jqml.min.js - Minified jquery.jqml.js.

Below are examples of how to use the two libraries. The only syntactical difference is that one uses jQuery.jqml() and the other uses jqml().

To create a new element just pass in the JsonML.

$.jqml([ 'div', {
    'id' : 'mydiv',
    'class' : 'colors borders'
}, [ 'p' ]]);

Say you need to create a template that prints table rows based on data received from the server. Well, just create an immediately executing anonymous function in the JsonML for a quick little template.

$.jqml([ 'table', (function( data ) {
    var dataRows = [ 'tbody' ];
    for ( var i = 0; i < data.length; i++ ) {
        dataRows.push([ 'tr', [ 'td', data[ i ]]]);
    return dataRows;
}( data ))]);

While passing an array of elements isn't technically correct JsonML, it makes for much easier templating.

$.jqml([ 'div', (function( strings ) {
    // notice there is no element in the first array item
    var ptags = [];
    for ( var i = 0; i < strings.length; i++ ) {
        ptags.push([ 'p', strings[i]]);
    // see how ptags is incorrect JsonML, but so much easier:
    // ptags == [[ 'p', 'hi' ],[ 'p', 'yall!' ]]
    return ptags;
}([ 'hi', 'yall!' ]))]);

The jQuery plugin also ties into the the jQuery event model. So you can attach events to the elements as they're being created.

$.jqml([ 'nav', [ 'a', {
    'href' : '#link',
    'click' : function( e ) {
        // do more stuff
}]]).prependTo( 'body' );

If you have a problem, post an issue. The plugins are super light weight, under 1K minified, so troubleshooting shouldn't be too hard. And let me know if you have any features/improvements you'd like to see.

Something went wrong with that request. Please try again.