JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<ul data-bind="foreach: Events">
    <li><span data-bind="text: Name"></span></li>
</ul>
<button data-bind="click: addMore">Add More</button>
<button data-bind="click: removeAll">Remove All</button>
<button data-bind="click: refresh">Refresh</button>

JavaScript

var newData = function (){
    return {            
    "Events":[{"Name":"Event1"},{"Name":"Event2"},{"Name":"Event3"}]
    }
};

    var viewModel = ko.mapping.fromJS( newData() );

    viewModel.addMore = function(){
        var data = newData();
        for( var item in data.Events ){
            viewModel.Events.push( data.Events[item] );
        }
    }
        
    viewModel.removeAll = function(){
        viewModel.Events.removeAll();
    }

    viewModel.refresh = function(){
        ko.mapping.fromJS(newData(), viewModel);
    }

    ko.applyBindings(viewModel);