Twitter bootstrap 手风琴没有崩溃答案

【问题标题】：Twitter bootstrap accordion not collapsingTwitter bootstrap 手风琴没有崩溃
【发布时间】：2012-12-21 22:18:08
【问题描述】：

我的 Bootstrap Accordion 没有崩溃。它填充了 JSON（标题和内容），我使用 Knockout 来执行此操作。但由于某种原因，它似乎没有倒塌，甚至没有像手风琴一样发挥作用。这是我的代码：

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

    var data2 = {
        "d": [
    {
        "__type": "Warehouse.Tracntrace.Members_Only.DLL.StockMovement.StockReturnMethod",
        "WarehouseID": 1,
        "ProductSKUID": 2,
        "LotID": 2,
        "LotName": "TestLot2",
        "AreaID": 8,
        "AreaName": "TestArea3L2",
        "BinID": 18,
        "BinName": "Area8Bin2"
    },
    {
        "__type": "Warehouse.Tracntrace.Members_Only.DLL.StockMovement.StockReturnMethod",
        "WarehouseID": 1,
        "ProductSKUID": 2,
        "LotID": 3,
        "LotName": "TestLot3",
        "AreaID": 11,
        "AreaName": "TestArea2L3",
        "BinID": 20,
        "BinName": "Area10Bin1"
    },
    {
        "__type": "Warehouse.Tracntrace.Members_Only.DLL.StockMovement.StockReturnMethod",
        "WarehouseID": 1,
        "ProductSKUID": 2,
        "LotID": 4,
        "LotName": "TestLot4",
        "AreaID": 15,
        "AreaName": "TestArea2L4",
        "BinID": 24,
        "BinName": "Area14Bin1"
    },
     {
         "__type": "Warehouse.Tracntrace.Members_Only.DLL.StockMovement.StockReturnMethod",
         "WarehouseID": 1,
         "ProductSKUID": 1,
         "LotID": 2,
         "LotName": "TestLot2",
         "AreaID": 8,
         "AreaName": "TestArea3L2",
         "BinID": 18,
         "BinName": "Area8Bin2"
     },
    {
        "__type": "Warehouse.Tracntrace.Members_Only.DLL.StockMovement.StockReturnMethod",
        "WarehouseID": 1,
        "ProductSKUID": 1,
        "LotID": 3,
        "LotName": "TestLot3",
        "AreaID": 11,
        "AreaName": "TestArea2L3",
        "BinID": 20,
        "BinName": "Area10Bin1"
    },
    {
        "__type": "Warehouse.Tracntrace.Members_Only.DLL.StockMovement.StockReturnMethod",
        "WarehouseID": 1,
        "ProductSKUID": 1,
        "LotID": 4,
        "LotName": "TestLot4",
        "AreaID": 15,
        "AreaName": "TestArea2L4",
        "BinID": 24,
        "BinName": "Area14Bin1"
    }
]
    };

    var ProductViewmodel;
    //debugger; 

    //Binds ViewModel
    function bindProductModel(Products) {
        var self = this;
        self.items = ko.mapping.fromJS([]);
        ProductViewmodel = ko.mapping.fromJS(Products.d, self.items);
        console.log(ProductViewmodel());
    }

    //Binds First DataSet
    function bindModel(vm, data) {
        var self = this;
        vm.Locations = ko.mapping.fromJS(data.d);
        console.log(ProductViewmodel());
        $('#accordion2').collapse({
            toggle: false
        })
       }



    //Starting Function
    $(document).ready(function () {
        bindProductModel(data);
        bindModel(ProductViewmodel()[0], data2);
        ko.applyBindings(ProductViewmodel);
    })

这是 HTML：

<div class="accordion" id="accordion2" data-bind="foreach: items">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion"
                href="#" data-bind="text: ProductSKUName"></a>
        </div>
        <div id="collapseOne" class="accordion-body collapse in">
            <div class="accordion-inner">
                <div id="injectbody">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>
                                    #
                                </th>
                                <th>
                                    Lot
                                </th>
                                <th>
                                    Area
                                </th>
                                <th>
                                    Bin
                                </th>
                                <th>
                                    Qty To Assign
                                </th>
                            </tr>
                        </thead>
                        <tbody data-bind="foreach: Locations">
                            <tr>
                                <td id="Assign">
                                    <input type="checkbox" />
                                </td>
                                <td id="Lot" data-bind="text: LotName">
                                </td>
                                <td id="Area" data-bind="text: AreaName">
                                </td>
                                <td id="Bin" data-bind="text: BinName">
                                </td>
                                <td id="QtyToAssign">
                                    <input type="text" />
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

对此的任何帮助将不胜感激。

【问题讨论】：

标签： jquery json twitter-bootstrap knockout.js

【解决方案1】：

您可以使用所有 Bootstrap 插件，只需使用 data- 属性，而无需编写一行 JavaScript。

因此您可以从您的 javascript 中删除 $('#accordion2').collapse() 调用。

但是，您必须确保使用/生成正确的 data- 属性，因此需要在 HTML 中更改一些内容：

data-parent="#accordion" 应该是 data-parent="#accordion2"，因为您的主 div 中有 id="accordion2"。

你的手风琴体应该有唯一的 id，所以你需要使用敲除 $index() 来生成它们：

<div data-bind="attr: {id: 'collapse'+$index()}" class="accordion-body collapse">

您必须在折叠链接上指定一个带有data-target 属性的css 选择器，以告知应该折叠哪个元素：

<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2"
   href="#" data-bind="text: ProductSKUName, 
                       attr: {'data-target': '#collapse'+$index() }"></a>

演示JSFiddle.

请注意，我已从示例中的行中删除了 in 类：

<div id="collapseOne" class="accordion-body collapse in">

因为否则默认情况下两个手风琴部分都将打开。

【讨论】：