Twitter bootstrap Twitter引导折叠（Accordion）和敲除JSON映射

我想使用敲除JSON映射和Twitter引导创建一个动态手风琴控件

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

var产品视图模型；
功能绑定产品模型（产品）{
var self=这个；
self.items=ko.mapping.fromJS（[]）；
ProductViewmodel=ko.mapping.fromJS（Products.d，self.items）；
应用绑定（ProductViewmodel）；
}
风险值数据={
“d”：[
{
“\u类型”：“Warehouse.tracentrace.Members\u Only.DLL.StockMovement.AvailibleStock”，
“仓库ID”：1，
“ProductSKUID”：2，
“产品名称”：“解码器1131”，
“仓库名称”：“软件开发测试”，
“状态”：“暂存”，
“QtyUnassigned”：5}，
{
“\u类型”：“Warehouse.tracentrace.Members\u Only.DLL.StockMovement.AvailibleStock”，
“仓库ID”：1，
“ProductSKUID”：3，
“产品名称”：“解码器1132”，
“仓库名称”：“软件开发测试”，
“状态”：“暂存”，
“QtyUnassigned”：15}
]
};
函数BuildLinkFromJSON（）{
产品模型（数据）；
var-link；
链接=''；
返回链接；
}
功能构建手风琴（窗格）{
var link=BuildLinkFromJSON（）；
var eventscocontainer=document.getElementById（'accordion'）；
var events=eventsContainer.innerHTML；
事件=事件+''+链接+'我的内容在此'；
eventsContainer.innerHTML=事件；
}
$（文档）.ready（函数（）{
构建手风琴（）；
});

HTML:

对于JSON数据中的每个产品，我基本上都需要在标题中显示ProductSKUName和QTYunAsigned，如果可能的话。我用发布的JSON数据和名为Build accordion的accordion HTML函数创建了它。

这个怎么样

我基本上添加了循环，因此它可以接受每个项目：

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

<!-- ko foreach: $data -->
<h3>
    <span data-bind="text: ProductSKUName"></span> :
    <span data-bind="text: QtyUnassigned"></span>                
</h3 >
<div>
    MyContent
</div>
<!-- /ko -->

</div >​

:
霉菌含量
​

我需要为每种产品创建一个手风琴窗格，因此我在这个简短的实例中创建了两个手风琴窗格编辑了答案和fiddler链接供您检查。先生，您是一位绅士和学者！！

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

<!-- ko foreach: $data -->
<h3>
    <span data-bind="text: ProductSKUName"></span> :
    <span data-bind="text: QtyUnassigned"></span>                
</h3 >
<div>
    MyContent
</div>
<!-- /ko -->

</div >​