JSFiddle - React, Tailwind, and code Playground
HTML
<script src="code.jquery.com/jquery-1.7.2.js"></script>
<script src="knockoutjs.com/js/knockout-2.1.0.js"></script>
<script src="documentcloud.github.com/underscore/underscore.js"></script>
<script src="//code.jquery.com/jquery-1.7.2.js"></script>
<script src="//knockoutjs.com/js/knockout-2.1.0.js"></script>
<script src="//documentcloud.github.com/underscore/underscore.js"></script>
<script>
// from http://knockoutjs.com/documentation/template-binding.html
/* ---- Begin integration of Underscore template engine with Knockout. Could go in a separate file of course. ---- */
ko.underscoreTemplateEngine = function () { }
ko.underscoreTemplateEngine.prototype = ko.utils.extend(new ko.templateEngine(), {
renderTemplateSource: function (templateSource, bindingContext, options) {
// Precompile and cache the templates for efficiency
var precompiled = templateSource['data']('precompiled');
if (!precompiled) {
precompiled = _.template("<% with($data) { %> " + templateSource.text() + " <% } %>");
templateSource['data']('precompiled', precompiled);
}
// Run the template and parse its output into an array of DOM elements
var renderedMarkup = precompiled(bindingContext).replace(/\s+/g, " ");
return ko.utils.parseHtmlFragment(renderedMarkup);
},
createJavaScriptEvaluatorBlock: function(script) {
return "<%= " + script + " %>";
}
});
ko.setTemplateEngine(new ko.underscoreTemplateEngine());
/* ---- End integration of Underscore template engine with Knockout ---- */
</script>
<div data-bind="template: 'test-template'"></div>
<script type="text/html" id="test-template">
<p>template rendered</p>
<% if (testval()) { %>
<p>testval true</p>
<% } %>
</script>
<script>
var vm = {
testval: ko.observable(false)
};
setTimeout(function(){
vm.testval(true);
}, 1000);
ko.applyBindings(vm);
</script>