JSFiddle - React, Tailwind, and code Playground

by Bjolja

HTML

<div data-bind="showText: CurrentTextContainer, with: CurrentTextContainer"> <span data-bind="Text: txt"></span>

</div>
<button data-bind="click: CreateTextContainer">Show container</button>
<button data-bind="click: DestroyTextContainer">Hide container</button>

JavaScript

ko.bindingHandlers.showText = {
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        console.log('Here too');
        if (value) {

        } else {

        }
    }
};

function MyViewModel(model) {
    var self = this;
    self.CurrentTextContainer = ko.observable('');

    self.CreateTextContainer = function (item, event) {
        console.log('Here');
        self.CurrentTextContainer(new TextContainer("Hi", new Date()));
    }

    self.DestroyTextContainer = function (item, event) {
        self.CurrentTextContainer('');
    }
}

function TextContainer(txt, dt) {
    var self = this;
    self.Text = ko.observable(txt);
    self.Date = ko.observable(dt);
}

ko.applyBindings(new MyViewModel({}));