JSFiddle - React, Tailwind, and code Playground

by Jon Kittell

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<div data-bind="foreach:items, koAccordion: {}">
<div>
<span data-bind="text: id"></span>
</div>
<div>
<span data-bind="text: name"></span>
</div>
</div>

JavaScript

ko.bindingHandlers.koAccordion = {
         init:function(element, valueAccessor, allBindingsAccessor, viewModel,bindingContext) {
                console.log("INITIALIZATION CALLBACK");
                $(element).accordion();
            },
    update:function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
                console.log("UPDATING CALLBACK");
                $(element).accordion('destroy').accordion();
            }
    };
function Item(id,name,description){
    this.id = ko.observable(id);
    this.name = ko.observable(name);
    this.description = ko.observable(description);
}


var viewModel = {
    items:ko.observableArray([new Item("New Id","New Name","New Description")]),
    addItem:function(id,name,description){
        viewModel.items.push(new Item(id,name,description))
    }    
};


ko.applyBindings(viewModel);