JSFiddle - React, Tailwind, and code Playground

by Fumunchu

HTML

<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div class="accordion" id="accordion">
</div>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

JavaScript

var ProductViewmodel;

function bindProductModel(Products) {
    var self = this;
    self.items = ko.mapping.fromJS([]);
    ProductViewmodel = ko.mapping.fromJS(Products.d, self.items);
    ko.applyBindings(ProductViewmodel);
}

var Data = {
    "d": [
        {
        "__type": "Warehouse.Tracntrace.Members_Only.DLL.StockMovement.AvailibleStock",
        "WarehouseID": 1,
        "ProductSKUID": 2,
        "ProductSKUName": "Decoder 1131",
        "WarehouseName": "SoftwareDevelopmentTest",
        "Status": "Staging",
        "QtyUnassigned": 5},
    {
        "__type": "Warehouse.Tracntrace.Members_Only.DLL.StockMovement.AvailibleStock",
        "WarehouseID": 1,
        "ProductSKUID": 3,
        "ProductSKUName": "Decoder 1132",
        "WarehouseName": "SoftwareDevelopmentTest",
        "Status": "Staging",
        "QtyUnassigned": 15}
    ]
};

    function BuildLinkFromJSON() {
        bindProductModel(Data);
        var link;
        link = '<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" data-bind="text: d.ProductSKUName" href="#collapse"></a>';
        return link;
    }


function BuildAccordian(Pane) {
        var link = BuildLinkFromJSON();
        var eventsContainer = document.getElementById('accordion');
        var events = eventsContainer.innerHTML;
        events = events + '<div class="accordion-group"><div class="accordion-heading">'+link+'</div><div id="collapseOne" class="accordion-body collapse in"><div class="accordion-inner">My Content Here</div></div>';
        eventsContainer.innerHTML = events;
    }

    $(document).ready(function () {
        BuildAccordian();
    });