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。

因此，您可以从javascript中删除$('#accordion2').collapse()来电。

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

data-parent="#accordion"应为data-parent="#accordion2"，因为您的主要div中有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">

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

Twitter引导手风琴没有崩溃

1 个答案: