我的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","ProductSKUID": 2,"ProductSKUName": "Decoder 1131","QtyUnassigned": 5 } ] }; var data2 = { "d": [ { "__type": "Warehouse.Tracntrace.Members_Only.DLL.StockMovement.StockReturnMethod","LotID": 2,"LotName": "TestLot2","AreaID": 8,"AreaName": "TestArea3L2","BinID": 18,"BinName": "Area8Bin2" },{ "__type": "Warehouse.Tracntrace.Members_Only.DLL.StockMovement.StockReturnMethod","LotID": 3,"LotName": "TestLot3","AreaID": 11,"AreaName": "TestArea2L3","BinID": 20,"BinName": "Area10Bin1" },"LotID": 4,"LotName": "TestLot4","AreaID": 15,"AreaName": "TestArea2L4","BinID": 24,"BinName": "Area14Bin1" },{ "__type": "Warehouse.Tracntrace.Members_Only.DLL.StockMovement.StockReturnMethod","BinName": "Area8Bin2" },"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>
任何有关这方面的帮助将不胜感激.
解决方法
您只能使用数据属性来使用所有Bootstrap插件,而无需编写单行JavaScript.
所以你可以从你的javascript中删除$(‘#accordion2’).collapse()调用.
但是,您必须确保使用/生成正确的数据属性,因此需要在HTML中更改一些内容:
data-parent =“#accordion”应该是data-parent =“#accordion2”,因为你的主div中有id =“accordion2”.
您的手风琴乐体应具有唯一的ID,因此您需要使用knockout $index()生成它们:
<div data-bind="attr: {id: 'collapse'+$index()}" class="accordion-body collapse">
并且您必须在折叠链接上指定具有数据目标属性的css选择器,以告知应折叠哪个元素:
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#" data-bind="text: ProductSKUName,attr: {'data-target': '#collapse'+$index() }"></a>
演示JSFiddle.
请注意,我已从示例中的行中删除了类:
<div id="collapSEOne" class="accordion-body collapse in">
因为否则两个手风琴部分都会默认打开.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。