JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.1.0.js"></script>
<button data-bind="click: getData">Trigger</button>
<div data-bind="template: { name: 'test', data: selected, if: selected }"></div>

<script id="test" type="text/html">
    <div data-bind="foreach: children">
        <span data-bind="text: foo"></span>
    </div>
</script>

JavaScript

ViewModel = function() {
    this.selected = ko.observable();
};
    
ViewModel.prototype = {
    getData: function() {
        this.selected(new ChildViewModel());
    }
};
        
ChildViewModel = function() {
        this.children = ko.observableArray([{ foo: "foo" },{ foo: "bar" }]);
};

ko.applyBindings(new ViewModel());