Twitter引导手风琴没有崩溃

Question

我的Bootstrap手风琴没有崩溃.它填充了JSON(Header和Content),我使用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>

任何有关这方面的帮助将不胜感激.

Answer 1

您可以仅使用data-属性来使用所有Bootstrap插件,而无需编写单行JavaScript.

所以你可以$('#accordion2').collapse()从你的javascript中删除电话.

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

本data-parent="#accordion"应该是data-parent="#accordion2"因为你必须id="accordion2"在你的主要股利.

您的手风琴乐体应具有唯一的ID,因此您需要使用knockout $ 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">

因为否则两个手风琴部分都会默认打开.