JSFiddle - React, Tailwind, and code Playground

by Josh Carroll

HTML

<div data-bind="foreach:employees">
    <div>
        <span data-bind="text:name"></span>
        <button type='button' data-bind="click:$parent.delete, visible:isActive">Delete</button>
    <span data-bind="visible:isActive">Active</span>
    </div>
</div>

JavaScript

(function(){

    var employee = function(name){
        var $this = this;
        
        $this.name = ko.observable(name || 'no name');
        $this.isActive = ko.observable(true);
    };
    
    var model = function(){
        var $this = this;
        
        $this.employees = ko.observableArray([
            new employee('Josh'),
            new employee('Dan'),
            new employee('Cathy')
        ]);
        
        $this.delete = function(emp){
            emp.isActive(false);
        };
    };
    
    ko.applyBindings(new model());
    
}());