jQuery/JavaScript JsonML Plugin
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.


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.