JSFiddle - React, Tailwind, and code Playground

by psteele

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.1/jquery-ui.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>
<ul id="accordion" data-bind="accordion: orders">
    <li>
         <h3><a data-bind='text: header' href="#"></a></h3>
        <div data-bind='text: content'></div>
    </li>
</ul>

JavaScript

ko.bindingHandlers.accordion = {
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        ko.utils.domData.set(element, 'init-accordion', true);
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).accordion("destroy");
        });
        return ko.bindingHandlers.foreach.init(element, valueAccessor, allBindings, viewModel, bindingContext);
    },
    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        ko.bindingHandlers.foreach.update(element, valueAccessor, allBindings, viewModel, bindingContext);
        if( ko.utils.domData.get(element, 'init-accordion') == true ) {
            ko.utils.domData.set(element, 'init-accordion', false);
            $(element).accordion();
        }
    }
}

var vm = {
    orders: [{
        header: 'Item 1',
        content: 'Item 1 Content'
    }, {
        header: 'Item 2',
        content: 'Item 2 Content'
    }, {
        header: 'Item 3',
        content: 'Item 3 Content'
    }]
}

ko.applyBindings(vm);