JSFiddle - React, Tailwind, and code Playground

by santoshpatro

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<button data-bind="click: addItem">Add</button>
<button data-bind="click: removeItem">Remove</button>

<ul data-bind="template: { name: 'listTempl', foreach: list }">    
</ul>

<script id="listTempl" type="text/html">
    <li data-bind="text:name"></li>
</script>

JavaScript

$(function(){
    var data= [ {name:"Bob"},  {name:"Joe"}, {name:"John"}
];
    
    var viewModel={
        list: ko.observableArray(data),
        
        addItem:function(){
            this.list.push({name: "Steve"});
        },
        
        removeItem:function(){
            this.list.pop();
        }
    };
    
    ko.applyBindings(viewModel);
});