JSFiddle - React, Tailwind, and code Playground

by Ignacio Fuentes

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>
<ul data-bind="foreach: products, visible: products().length>0">
    <li data-bind="text: name"></li>
</ul>
<div class="dataless" data-bind="visible: products().length==0">
    You havent added any products
</div>

CSS

.dataless{
    width:100%;
    height:120px;
    background-color:red;
}

JavaScript

function ViewModel(){
    var self = this;
    self.products= ko.observableArray();
}

var vm = new ViewModel();
ko.applyBindings(vm);

//simulating latency to get data from server.
var millisecondsToWait = 300;
setTimeout(function() {
    vm.products.push({name:"Some Product Name"});
}, millisecondsToWait);