JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<script src="http://documentcloud.github.io/underscore/underscore-min.js"></script>
<h3>Using Knockout.js to handle both data-bind and showing of Content</h3>
<div class="mbl" data-bind="if: $root.isEmpty">
    <span>You do not have Michael Jackson Songs</span>
</div>

<div data-bind="ifnot: $root.isEmpty">
    <span>You have some Michael Jackson Songs</span>
    <ul class=".songList" data-bind="foreach: $root.mjSongs">
        <li>
            <span data-bind="text: $data.title"></span>
         </li>
    </ul>
</div>
    
<div>
    <button type="button" data-bind="click: $root.reload">Reload</button>
    <button type="button"  data-bind="click: $root.clear">Clear</button>
</div>

CSS

.control : checked{
    
}

.mbl { 
 margin-bottom:10px;   
}

.inline { 
    display: inline;
}

JavaScript

;(function () {
    'use strict';
    
    window.visibilityDemo = window.visibilityDemo || {}; 
    
    window.visibilityDemo.viewModel = function () {
        var self = this;
    
        self.model = function() { 
            return [
            { 'title': 'Best of Joy' }, 
            { 'title': "Give in to me" }, 
            { 'title': "Much too Soon" } ];
        };
            
        self.mjSongs =  ko.observableArray(self.model());
    
        self.clear = function () {
            if (self.mjSongs().length === 0) {
                return;
             }

            self.mjSongs.removeAll();
        };
    
       self.reload = function() {
           self.mjSongs(self.model());
        };
        
        self.isEmpty= ko.computed(function () {
            return self.mjSongs().length === 0;
        });

        return self;
    }
})();


ko.applyBindings(window.visibilityDemo.viewModel());