Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

jQuery/JavaScript JsonML Plugin

branch: master

Update jquery.jqml.js

To avoid failing on empty arrays
latest commit f2d249e5e9
cd rubin cdrubin authored trevnorris committed
Octocat-spinner-32 src Update jquery.jqml.js
Octocat-spinner-32 test Add page for testing
Octocat-spinner-32 README.md Add array in array support
README.md

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 ) {
        e.preventDefault();
        // 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.