twitter-bootstrap – Twitter Bootstrap Collapse(Accordion)使

发布时间：2020-12-17 21:26:41 所属栏目：安全来源：网络整理

导读：我想使用Knockout JSON Mapping和Twitter bootstrap创建一个Dynamic Accordion控件. var ProductViewmodel;function bindProductModel(Products) { var self = this; self.items = ko.mapping.fromJS([]); ProductViewmodel = ko.mapping.fromJS(Products.d,

我想使用Knockout JSON Mapping和Twitter bootstrap创建一个Dynamic Accordion控件.

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","ProductSKUID": 3,"ProductSKUName": "Decoder 1132","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>

我基本上需要在我的JSON数据中的每个产品标题应该在标题中显示ProductSKUName和QtyUnnasigned,如果这是可能的话.我用已发布的JSON数据和名为Build Accordion的手风琴HTML函数创建了这个Fiddle.

解决方法

这个怎么样？ http://jsfiddle.net/billaraw/xZHbh/4/

我基本上添加了循环所以它可以采取每个项目：

<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 >?

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!