JSFiddle - React, Tailwind, and code Playground

by Himanshu Joshi

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<script src="http://knockoutjs.com/downloads/knockout-3.1.0.js"></script>
<ul id="accordion" data-bind="foreach: orders, accordion: {}">
    <li>
         <h3><a href="#" data-bind="text:name">header</a></h3>

        <div data-bind="text: address">Content goes here</div>
    </li>
</ul>

JavaScript

ko.bindingHandlers.accordion = {
    init: function (element, valueAccessor) {
        var options = valueAccessor() || {};
        setTimeout(function () {
            $(element).accordion(options);
        }, 0);

        //handle disposal (if KO removes by the template binding)
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).accordion("destroy");
        });
    },
    update: function (element, valueAccessor) {
        var options = valueAccessor() || {};
        $(element).accordion("destroy").accordion(options);
    }
}

function Item(id, name, address) {
    this.id = ko.observable(id);
    this.name = ko.observable(name);
    this.address = ko.observable(address);
}


function AppViewModel() {
    var self = this;
    self.orders = ko.observableArray([
    new Item(1, "Jack", "New City US"),
    new Item(2, "Mark", "Old Highway UK"),
    new Item(3, "Thomas", "New City US")]);

    //$.getJSON("api/orders", self.orders);
}
ko.applyBindings(new AppViewModel());