JSFiddle - React, Tailwind, and code Playground

by nicholasstephan

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<button id="add">Add Item</button>
<ul data-bind="foreach:{data:items, afterRender:slideIn}">
    <li data-bind="text:$data"></li>
</ul>

CSS

li {
    width:400px;
    height:40px;
    line-height:40px;
    background-color:grey;
    margin:5px;
}

JavaScript

var vm = {
    items:ko.observableArray([]),
    fadeIn:function(elem) {
        $(elem).fadeIn();
    },
    slideIn:function(elem) {
        $(elem).slideDown();
    }
};
       

var Item = function() {
    this.fadeIn = function(elem) {
        $(elem).fadeIn();
    };
};

ko.applyBindings(vm);



$("#add").click(function() {
    vm.items.push("test");
});