Manipulate DOM directly with Transparency and jQuery

Sometimes directives syntax does not give you enough flexibility to construct complex DOM objects.

In this case you can directly manipulate DOM in directives html callback.

Example:

       directives : {
            // Format one entry in the listing
            "items" : {

                // Populate <tr> from incoming data
                'listing-entry' : {

                    /**
                     * Populate an entry in a template dynamically using jQuery.
                     * 
                     * This directive callback has *this* set to the current list element.
                     * 
                     * @param  {Object} target Object of {index : list index, element : DOMNode, value : existing element text value}
                     */
                    html : function(target) {

                        // Convert raw DOM to jQuery Wrapper
                        // for modifying it in-place
                        var $elem = $(target.element);

                        // Now you can use all jQuery's goodness on the node
                        $elem.append("<td>");
                        // Set CSS class using incoming object myCSSClass attribute 
                        $elem.addClass(this.myCSSClass);
                        // etc...
                    }
          }
}