JSFiddle - React, Tailwind, and code Playground

by Richard Hunter

HTML

<div>
    <h1 data-bind="text: title"></h1>
    
    <div data-bind="template: { name : 'main-template', data : inner }"></div>

</div>

<script type="text/html" id="main-template">
    
    <article>
        <h2 data-bind="text: $root.title" ></h2>
        <p>It's the end of the world as we know it.</p>
    </article>
    
</script>

JavaScript

var model = {
    
    title : "main title",

    inner : {
    
        title : "this is my inner title"
    }
}

ko.applyBindings(model);