JSFiddle - React, Tailwind, and code Playground

by raguchi

HTML

<div class="form-group" data-bind="visible:users().length == 0">
    <code>visible:users().length == 0</code>
    <span>Here is my super awesome message!</span>
</div>

<div class="form-group" data-bind="visible:!showUsers()">
    <code>visible:!showUsers()</code>
    <span>Here is my super awesome message!</span>
</div>

<div class="form-group" data-bind="visible:users().length > 0">
    <ul data-bind="foreach:users">
        <li>
            <span data-bind="text:$data"></span>
            <a href='#' data-bind="click:$parent.removeUser">X</a>
        </li>
    </ul>
</div>
<span data-bind="text: evidencia"></span>
<span data-bind="visible: evidencia()==='1'"> SOY VISIBLE </span>
<button type="button" data-bind="click:addUser">Add User</button>

JavaScript

var ViewModel = function(){
    var _this = this;
    
    _this.users = ko.observableArray(['Josh', 'Bob', 'Don']);
    _this.evidencia = ko.observable("1");
    _this.removeUser = function(user){
        _this.users.remove(user);
    };
    
    _this.addUser = function(){
        _this.users.push("New User " + (_this.users().length + 1));
    };
    
    _this.showUsers = ko.computed(function(){
        return _this.users().length > 0;
    });
};

ko.applyBindings(new ViewModel());