3

Bootstrap アコーディオンが崩壊しません。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>

これに関するヘルプは大歓迎です。

4

1 に答える 1

7

data-JavaScript を 1 行も書かずに、属性を使用するだけですべての Bootstrap プラグインを使用できます。

$('#accordion2').collapse()したがって、JavaScriptから呼び出しを削除できます。

ただし、正しい data-属性を使用/生成していることを確認する必要があるため、HTML でいくつか変更する必要があります。

これdata-parent="#accordion"は、メイン div にあるdata-parent="#accordion2"ためです。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">

そうしないと、両方のアコーディオン部分がデフォルトで開いてしまうからです。

于 2013-01-08T09:09:40.510 に答える