JSFiddle - React, Tailwind, and code Playground

by psteele

HTML

<div>Items:<span data-bind='text: items().length'></span></div>
<div data-bind='foreach: items'>
    <div data-bind='text: $data'></div>
</div>

<input type='button' value='Push' data-bind='click: addNew' /><br/>
<input type='button' value='Pop' data-bind='click: removeItem' /><br/>
<input type='button' value='Replace' data-bind='click: replace' /><br/>

JavaScript

var viewmodel = function() {
    var me = this;
    
    me.items = ko.observableArray([]);
    
    me.addNew = function() {
        me.items.push('new item');
    }
    
    me.removeItem = function() {
        me.items.pop(me.items()[0]);
    }
    
    me.replace = function() {
        me.items(['one', 'two']);
    }
}

ko.applyBindings(new viewmodel());