JSFiddle - React, Tailwind, and code Playground

by Muhammad Raheel

HTML

<button data-bind="click: click">Toogle IsEditing</button>
<div data-bind='template:{ name: "temp", data: IsEditing }'></div>

<script id='temp' type='text/html'>
<!-- ko ifnot: $root.IsEditing -->
<span data-bind="{ text:$root.SystemName }"></span>
<!-- /ko -->
<!-- ko if: $root.IsEditing -->
<input type="text" id="SystemName" data-bind="{ value: $root.SystemName }" />
<h1>YOU SHOULD NOT SEE ME ON FIRST RENDER</h1>
<!-- /ko -->
</script>

JavaScript

var ViewModel = function()
{
    var self = this;
    self.SystemName = ko.observable('Test SystemName');
    self.IsEditing = ko.observable(false);
    self.click = function()
    {
        self.IsEditing(!self.IsEditing());
    }
}

ko.applyBindings(new ViewModel());