JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/SteveSanderson/knockout/master/build/output/knockout-latest.debug.js"></script>
<script src="https://raw.github.com/mbest/knockout-switch-case/master/knockout-switch-case.js"></script>
<!-- ko with: sub -->
<h1>Control (with: sub)</h1>
<div>
    Works ($parent.name): <span data-bind="text: $parent.name"></span><br/>
    Works (subName): <span data-bind="text: subName"></span>
</div>
<h1>Switch 1 (with: sub; switch: subSelected)</h1>
<div data-bind="switch: subSelected">
    <div data-bind="case.visible: 'first'">
        Works ($parents[1].name): <span data-bind="text: $parents[1].name"></span><br/>
        Works (subName): <span data-bind="text: subName"></span>
    </div>
</div>
<h1>Switch 2 (with: sub; switch: $parent.selected)</h1>
<div data-bind="switch: $parent.selected">
    <div data-bind="case.visible: 'first'">
        Works ($parents[1].name): <span data-bind="text: $parents[1].name"></span><br/>
        Works (subName): <span data-bind="text: subName"></span>
    </div>
</div>
<!-- /ko -->

<h1>Switch 3 (switch: sub.subSelected)</h1>
<div data-bind="switch: sub.subSelected">
    <div data-bind="case.visible: 'first'">
        Works (name): <span data-bind="text: name"></span><br/>
        Works (sub.subName): <span data-bind="text: sub.subName"></span>
    </div>
</div>

CSS

h1 { font-weight: bold; padding-top: 10px; }

JavaScript

var vm = {
    name: ko.observable('name works'),
    selected: ko.observable('first'),
    sub: {
        subName: ko.observable('subName works'),
        subSelected: ko.observable('first')
    }
};

ko.applyBindings(vm);