Take the 2-minute tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

I want to create a Dynamic Accordion control using Knockout JSON Mapping and Twitter bootstrap.

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();
    });

HTML:

<div class="accordion" id="accordion">
</div>

I basically need for each product in my JSON data the header should display the ProductSKUName and The QtyUnnasigned in the header, if this is even possible. I have created this Fiddle with the posted JSON data and the accordion HTML Function called Build Accordion. So For Each Product I need to Create an Accordion Pane.

share|improve this question
add comment

closed as unclear what you're asking by Jamal Dec 16 '13 at 1:53

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. See the How to Ask page for help clarifying this question.If this question can be reworded to fit the rules in the help center, please edit the question.

Browse other questions tagged or ask your own question.