JSFiddle - React, Tailwind, and code Playground

by krofdrakula

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<article>
    <div class="my-widget">
        <script type="text/x-jquery-tmpl" class="item">
            <p>${Message}</p>
        </script>
    </div>
</article>

JavaScript

document.createElement('article');

var augmentViewModel = function(viewModel, widget) {
    return $.extend({}, viewModel, {
        widget: widget,
        templates: (function () {
            var tmpl = {};
            widget.find('script[type="text/x-jquery-tmpl"]').each(function () {
                var className = $.trim($(this).attr('class'));
                // convert dashed-class-name to camelCaseName
                className = className.replace(/-[\w\d]/g, function ($0) { return $0.toUpperCase(); }).replace(/[^\w\d]/g, '');
                tmpl[className] = $(this).html();
            });
            return tmpl;
        })()
    });
};

$(function() {
    $('body').wrapInner('<div style="border:1px solid red"/>');
    $('.my-widget').each(function() {
        var widget = $(this), viewModel = augmentViewModel({ Message: 'Correctly replaced' }, widget);
        $.tmpl(viewModel.templates.item, viewModel).appendTo('body');
    });
});