LIKE A BOSS!

---

Example below is for jsonHTML v0.2 (never released), as of v0.5 everything here is still backwards compatible, if you prefer writing in the method below, feel free, the methods here should never become depricated even in the later versions. v0.5 can be thought of as a shell over v0.2, below is jsonHTML in it's most true, lowest level, and flexible form. Updates to this part of the documentation is coming soon. Due to the "Keep it black" philosophy, v0.2 will be forked and later released as "jsonHTML Black v1.0."

---

Example below is a template object in which you can create, and add the generated HTML to a div "container." It does require that there is an existing div to append to. One potential confusion to watch out for, is every time you use a template to generate HTML, make sure the id's are never the same, or an append may append to all items of that same id; Good practice will prevent a wormhole from opening up in your mind, consuming all logic and understanding.

#####EXAMPLE:

    //this is the template object, the function will return a custom JSON object using the object you pass to it, which can then be used by
    //appendHTML to generate and append the HTML from your JSON object.
    var jsonHTMLObj = function (data) {
        return {
            type: 'div',
            id: 'thisIsDivStuff'+data.indx, //there must always be an id so that my code knows where to make appends.
            class: 'divStuff',
            text: '<h2>'+HELLO WORLD!+'</h2>', //you can still have some html, it just throws it all in as a string.
            functions: [function () {
                $('#thisIsDivStuff'+data.indx).css({ //set the css styling using jQuery! Or any other functions you would like!
                    'width': '50%',
                    'border': '1px solid black',
                    'text-align': 'center',
                });
            }],
            children: [ //an array of child objects, these can be anything, even text boxes.
                {
                    type: 'div',
                    id: 'thisIsDivStuffChild0', //notice this id is static and could cause some bugs, +data.indx would make it dynamic.
                    text: 'Hello World From Child 0',
                    functions: [function () {
                        $('#thisIsDivStuffChild0').css({
                            'width': '50%',
                            'border': '1px solid black',
                            'text-align': 'center',
                        });
                    }]
                },
                
                {
                    type: 'div',
                    id: 'thisIsDivStuffChild1', //notice this id is static and could cause some bugs, +data.indx would make it dynamic.
                    text: 'Hello World From Child 1',
                    functions: [function () { //This is an array of functions, notice how it only has one function in it currently.
                        $('#thisIsDivStuffChild1').css({
                            'width': '50%',
                            'border': '1px solid black',
                            'text-align': 'center',
                        });
                    }]
                },
            ]
        }
    };
    appendHTML(jsonHTMLObj{ //now just append it to any div!
        indx: 1, //these are properties that you can set to your template object.
    }, '#containerDivIDAsString');

Now, lets say I want 'thisIsDivStuffChild1' to mutate into a textbox!

First, we would want to setup a mutable Div and a mutable textbox structure to make things a tad bit easier to conceptualize. If you have taken C++ in the past, these would be similar to Structs:

function mDiv(element) { //a generic mutable JSON Div.
    return {
        type: 'div',
        id: element.id,
        text: element.text,
        functions: [element.css, element.event],
        children: undefined !== element.children ? element.children : undefined, //meh, it could have a child object...
    }  
};

function mTxt(element) { //a generic mutable JSON text object.
    return {
        type: 'textbox',
        id: element.id,
        text: element.text,
        functions: [element.css, element.event],
        children: undefined !== element.children ? element.children : undefined, //meh, it could have a child object...
    }  
};

Then, I pass to my "Structs" an object full of properties explaining what I want them to do, I can do this now by completely replacing my orignal json div element above:

mDiv({
    id: 'thisIsDivStuffChild1',
    text: 'Hello World From Child 1',
    css: function() {
        $('#thisIsDivStuffChild1').css({
            'width': '50%',
            'border': '1px solid black',
            'text-align': 'center',
        });
    },
    event: function () {
        $('#thisIsDivStuffChild1').click(function() { //mutate on the click!
            $('#thisIsDivStuffChild1').remove(); //remove the old
            appendHTML(mTxt({ //in with the new!
                id: 'thisIsDivStuffChild1', //same as the previous id, were replacing the old with the new!
                text: 'Hello World From Child 1', //the text I want in my text box.
                css: function() {
                    $('#thisIsDivStuffChild1').css({
                        'color': 'purple', //i want my textbox font to be purple :)
                    });
                },
                event: function () { //now in reverse!
                    $('#thisIsDivStuffChild1').blur(function() { //when you click away from the textbox, it goes back to original!
                        $('#thisIsDivStuffChild1').remove();
                        appendHTML(jsonHTMLObj(data).children[1], '#thisIsDivStuff'+data.indx); // I can just grab the original object, like recursion!
                    });
                    $('#thisIsDivStuffChild1').focus(); //focus will now be in the text box.
                },
            }), '#thisIsDivStuff'+data.indx);
        });
    },
}),

Make sure to check out the second HTML example "syntacticSugarExample.html," jsonHTML has been updated and can be written in a more functional programming style, but it's still got a long way to go before it's easy to use, but for now, again this is what we got, if someone would like to fork and add some "Sugar", that would be great, but for now jsonHTML is black as can be!

You can execute the completed code in the 'example.html' or 'syntacticSugarExample.html' This is a fully operational example of what jsonHTML can do, though, it's only a basic example, and you can do much... MUCH more with jsonHTML.