Twitter bootstrap手風琴不折疊

My Bootstrap手風琴不折疊。它使用JSON（Header和Content）填充，我使用Knockout來執行此操作。但由於某種原因，它似乎沒有崩潰，甚至沒有起到手風琴的作用。這裏是我的代碼：Twitter bootstrap手風琴不折疊

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>

任何幫助，這將不勝感激。

來源

2013-01-08 Jacques Bronkhorst

您只能在使用data-屬性的情況下使用所有Bootstrap插件，而無需編寫一行JavaScript代碼。

所以你可以刪除你的javascript調用$('#accordion2').collapse()。

但是你必須確保你使用/生成正確的data-屬性，所以一些事情需要在你的HTML改變：

的data-parent="#accordion"應該是data-parent="#accordion2"，因爲你在你的主要DIV有id="accordion2"。

你的手風琴機構應具有唯一的ID的，所以你需要用淘汰賽$指數（）的使用生成它們：

<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-08 09:09:40 nemesv

Twitter bootstrap手風琴不折疊

回答

相關問題