JSFiddle - React, Tailwind, and code Playground
JavaScript
/*
* jQuery Templating Plugin
* NOTE: Created for demonstration purposes.
* Copyright 2010, John Resig
* Dual licensed under the MIT or GPL Version 2 licenses.
*/
(function(jQuery){
// Override the DOM manipulation function
var oldManip = jQuery.fn.domManip,
htmlExpr = /^[^<]*(<[\w\W]+>)[^>]*$/;
jQuery.fn.extend({
render: function( data, options ) {
return this.map(function(i, tmpl){
return jQuery.render( tmpl, data, options );
});
},
// This will allow us to do: .append( "template", dataObject )
domManip: function( args ) {
// This appears to be a bug in the appendTo, etc. implementation
// it should be doing .call() instead of .apply(). See #6227
if ( args.length > 1 && args[0].nodeType ) {
arguments[0] = [ jQuery.makeArray(args) ];
}
if ( args.length >= 2 && typeof args[0] === "string" && typeof args[1] !== "string" ) {
arguments[0] = [ jQuery.render( args[0], args[1], args[2] ) ];
}
return oldManip.apply( this, arguments );
}
});
jQuery.extend({
render: function( tmpl, data, options ) {
var fn, node;
if ( typeof tmpl === "string" ) {
// Use a pre-defined template, if available
fn = jQuery.templates[ tmpl ];
if ( !fn && !htmlExpr.test( tmpl ) ) {
// it is a selector
node = jQuery( tmpl ).get( 0 );
}
} else if ( tmpl instanceof jQuery ) {
node = tmpl.get( 0 );
} else if ( tmpl.nodeType ) {
node = tmpl;
}
if ( !fn && node ) {
var elemData = jQuery.data( node );
fn = elemData.tmpl || (elemData.tmpl = jQuery.tmpl( node.innerHTML ));
...