JSFiddle - React, Tailwind, and code Playground

by rjurd

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js"></script>
<h1>List with clearing</h1>
<div data-bind="serverForEach : countries">
    <div data-bind='text: name'>UK</div>
    <div data-bind='text: name'>France</div>
    <div data-bind='text: name'>United States</div>
</div>

CSS

h1 { font-size: 1.5em; font-weight: bold; margin: 10px 0; }

JavaScript

var viewModel = {
    countries : [
        { name: 'Australia' },
        { name: 'NZ' },
        { name: 'Tonga' }
    ]
}
    
ko.bindingHandlers.serverForEach = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        // add them to the model
        $.each($(element).children(), function(i,e) {
        	valueAccessor().push({name: $(e).text()});
        });
        //console.dir(valueAccessor());
    },
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
        ko.bindingHandlers.foreach.update(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
    }
};
    
ko.applyBindings(viewModel);