添加淘汰賽數據驅動表以淘汰賽數據驅動的手風琴板

Question

我想創建一種通用控件，我想在我的應用程序中使用。這將是一個標準的手風琴（我用我的Twitter Bootstrap），這取決於我從服務器接收的JSON數據將創建多少手風琴部分。在每個手風琴部分，我想添加一個普通的HTML表格，這個表格也是使用從服務器獲取的JSON數據構建的。 一切都會在客戶端運行，接受Ajax的初始文章以獲取JSON信息。所以我相信某種HTML模板是必需的？

所以這就是我到目前爲止。 JSON數據：

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" 
    } 
] 
    }; 

我只是用2 AJAX調用從我的服務器得到這一點，你可以看到有2個數據集之間的相似性（它們都可以與彼此ProductSKUID和WarehouseID ）。

接下來，我有我的KnockoutJS和標準JQuery，通過使用innerHTML方法創建手風琴並在手風琴內創建HTML表來構建手風琴的功能。

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()); 
    } 

    //Create Table In Accordion PANE based on Data 
    //This Creates The Table in Each Accordion Pane 
    function InjectBody() { 
     var bodyContainer = document.getElementById('injectbody'); 
     var body = bodyContainer.innerHTML; 
     body = body + '<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>'; 
     bodyContainer.innerHTML = body; 
    } 

    //Create Accordian Panes 
    //This Creates The Hyperlink Based On JSON DATA 
    function BuildLinkFromJSON() { 
     var link; 
     link = '<a data-bind="foreach: items" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse"><span data-bind="text: ProductSKUName"></span></a>'; 
     //This Creates The Table in Each Accordion Pane 
     InjectBody(); 
     return link; 
    } 

    //Create Accordian Header 
    //This Creates Each Header in the Accordian 
    function BuildAccordian() { 
     //This Creates The Hyperlink Based On JSON DATA 
     var link = BuildLinkFromJSON(); 
     var eventsContainer = document.getElementById('accordion'); 
     var events = eventsContainer.innerHTML; 
     events = events + '<div class="accordion-group"><div class="accordion-heading">' + link + '</div><div id="collapseOne" class="accordion-body collapse in"><div class="accordion-inner"><div id="injectbody"></div></div></div>'; 
     eventsContainer.innerHTML = events; 
    } 


    //Starting Function 
    //This Creates the ProductViewModel Binding of both DataSets 
    $(document).ready(function() { 
     bindProductModel(data); 
     bindModel(ProductViewmodel()[0], data2); 
     ko.applyBindings(ProductViewmodel); 

    }) 

那麼它似乎完全失敗，而且我不確定該怎麼做來解決它......我創造了這個Fiddle但沒有輸出，即使給出。任何幫助將不勝感激！！

Answer 1

當我爲KO定製「控件」時，我使用了一個字符串模板源，並在腳本中爲「控件」寫入了HTML。您可以檢查出我的進步KO組合框爲你工作如何能做到這

https://github.com/AndersMalmgren/Knockout.Combobox/blob/master/src/knockout.combobox.js

退房模板部分

//string template source engine 
var stringTemplateSource = function (template) { 
    this.template = template; 
}; 

stringTemplateSource.prototype.text = function() { 
    return this.template; 
}; 

var stringTemplateEngine = new ko.nativeTemplateEngine(); 
stringTemplateEngine.makeTemplateSource = function (template) { 
    return new stringTemplateSource(template); 
}; 

var template= '<div data-bind="with: model">\ 
    <span data-bind="text: data"></span>\ 
</div>'; 

，並從一個自定義的結合應用模板

ko.bindingHandlers.myBinding = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
     var model = new MyBindingViewModel(valueAccessor()); 
     ko.renderTemplate(template, bindingContext.createChildContext(model), { templateEngine: stringTemplateEngine }, element, "replaceChildren"); 

     return { controlsDescendantBindings: true }; 
    } 
}; 

您現在可以使用您的自定義綁定，如您的視圖中的常規綁定

<div data-bind="myBinding: model"></div>