rSupplant

JSON to HTML Recursive Templating

Download the code

Documentation

rSupplant( data, setup, extraParams )

data: Array of Objects (JSON)

setup: Object

extraParams: To pass within each callback if needed. Optional.

Setup:

template: Object

Recursive definition of the html template in two separate properties. You use placeholders anywhere in your templates.

outerContent: String

outerContent:
    '<ul>'+
        '{<innerContent>}'+
    '</ul>'

innerContent: String

Placeholder <outerContent> is needed to create the recursive definition.

innerContent:
    '<li>'+
        '{myPlaceholder}'+
        '{<outerContent>}'+
    '</li>'

Placeholders can be any of your data object property names. It will map directly with it. You can define your own placeholders wich will need to be define as a function (see placeholders)

placeholders: Object

Callbacks for any placeholders define in the template. The property names are directly map to the placeholders. Useful when some processing are needed before replacing the placeholder with the corresponding data.

placeholders: {
    myPlaceholder: function (o, state, extraParams) {
        if (state.depth == 1) {
            return o.myPlaceholder.toUpperCase(); // o is the current object
        } else {
            return o.myPlaceholder;
        }
    }
}

recursiveProperty: String, (default: 'list')

The property name of your data structure that makes it recursive. Only necessary when recursion does apply.

All code and content by Philippe Rathé is licensed under a Creative Commons Attribution 2.5 Canada License (unless otherwise mentioned).