JSFiddle - React, Tailwind, and code Playground

HTML

if on "container": 
<!-- ko ifnot: IsEditing -->
<span data-bind="{ text:SystemName }"></span>
<!-- /ko -->
<!-- ko if: IsEditing -->
<input type="text" id="SystemName" data-bind="{ value: SystemName }" />
<h1>YOU SHOULD NOT SEE ME ON FIRST RENDER</h1>
<!-- /ko -->
<br/>
if on input:
<input type="text" id="SystemName" data-bind="{ value: SystemName }" />

<button data-bind="click: click">Toogle IsEditing</button>

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());