在html/knockout js中爲表格中的每個不同項目創建部分

Question

我正在研究一個應用程序，其中的某些其他數據與具有使用基本js綁定的數據的html表中的其他數據相關聯。下面的代碼不會在部分中顯示產品，但每個產品都顯示爲不同的產品，儘管它們是相同的。

HTML

<table class="productTable" data-bind="visible: !loading()"> 

    <thead> 

     <tr> 
      <th>Product</th> 
      <th>Term</th> 
      <th>Location</th> 
      <th>Pipeline</th> 
      <th>Bid C/P</th> 
      <th>Bid Volume</th> 
      <th>Index</th> 

      <th>Bid</th> 
      <th>Offer</th> 
      <th>Offer Volume</th> 
      <th>Offer C/P</th> 
      <th></th> 
      <th></th> 
      <th></th> 
      <th></th> 
     </tr> 

    </thead> 
    <tbody data-bind="foreach: canadiancrudes" > 
     <tr > 
      <td data-bind="text:Product"></td> 
     </tr> 
     <tr> 
<td data-bind="text: Term"></td> 
    <td data-bind="text: Location"></td> 
    <td data-bind="text: Pipeline"></td> 
    <td data-bind="text: BidCP"></td> 
    <td data-bind="text: BidVolume"></td> 
    <td data-bind="text: Index"></td> 
    <td> 
     <input type="text" id="txbReadBid" data-bind="value: Bid" /></td> 
    <td> 
     <input type="text" id="txbReadOffer" data-bind="value: Offer" /></td> 
    <td data-bind="text: OfferVolume"></td> 
    <td data-bind="text: OfferCP"></td> 
    <td></td> 
    <td> 
     <a href="#" title="Edit" data-bind="click: $root.edit"> 
      <img src= '@Url.Content("~/Images/edit.png")' /></a></td> 

    <td><a href="#" title="Delete" data-bind="click: $root.remove"> 
     <img src= '@Url.Content("~/Images/delete.png")' /></a></td> 
    <td> 
     <a href="#" title="Copy" data-bind="click: $root.copy"> 
      <img src= '@Url.Content("~/Images/add.png")' /></a> 
    </td> 
</tr> 

    </tbody> 

    <tfoot> 
     <tr> 
      <th>Product</th> 
      <th>Term</th> 
      <th>Location</th> 
      <th>Pipeline</th> 
      <th>Bid C/P</th> 
      <th>Bid Volume</th> 
      <th>Index</th> 

      <th>Bid</th> 
      <th>Offer</th> 
      <th>Offer Volume</th> 
      <th>Offer C/P</th> 
      <th></th> 
      <th></th> 
      <th></th> 
      <th></th> 
     </tr> 

    </tfoot> 
</table> 

從下面的截圖可以看到，我有不同的其他領域類似的產品，但它們不是切片。現在我想爲每個產品都設置一個部分，比如Product C5在表格中有四個條目，所以我希望所有這些條目都在一個部分中，並且每當我點擊右側的'+'圖像時，它會添加一個具有相同產品的行與'+'圖像相關聯，我試圖將其添加到相同的產品部分。

Answer 1

我已想出的溶液如下

Index.cshtml

<!--ko foreach: products--> 
<h3 data-bind="text: $data"></h3> 
<table class="productTable"> 

    <thead> 

     <tr> 

      <th>Term</th> 
      <th>Location</th> 
      <th>Pipeline</th> 
      <th>Bid C/P</th> 
      <th>Bid Volume</th> 
      <th>Index</th> 

      <th>Bid</th> 
      <th>Offer</th> 
      <th>Offer Volume</th> 
      <th>Offer C/P</th> 

     </tr> 

    </thead> 

    <tbody data-bind="foreach: $root.subsetcanadiancrudes.index.Product()[$data]"> 

     <tr> 
      <td data-bind="text: Term"></td> 
      <td data-bind="text: Location"></td> 
      <td data-bind="text: Pipeline"></td> 
      <td data-bind="text: BidCP"></td> 
      <td data-bind="text: BidVolume"></td> 
      <td data-bind="text: Index"></td> 

      <td data-bind="text: Bid"></td> 
      <td data-bind="text: Offer"></td> 
      <td data-bind="text: OfferVolume"></td> 
      <td data-bind="text: OfferCP"></td> 
     </tr> 

    </tbody> 


    <tfoot> 
     <tr> 

      <th>Term</th> 
      <th>Location</th> 
      <th>Pipeline</th> 
      <th>Bid C/P</th> 
      <th>Bid Volume</th> 
      <th>Index</th> 

      <th>Bid</th> 
      <th>Offer</th> 
      <th>Offer Volume</th> 
      <th>Offer C/P</th> 

     </tr> 

    </tfoot> 
</table> 
<!--/ko--> 

敲除JS

ko.observableArray.fn.extendsdistinct = function (attrib) {var me = this;me.index = {};me.index[attrib] = ko.observable({});ko.computed(function() {var attribIndex = {};ko.utils.arrayForEach(me(), function (item) {var key = ko.utils.unwrapObservable(item[attrib]);if (key) {attribIndex[key] = attribIndex[key] || [];attribIndex[key].push(item);}});me.index[attrib](attribIndex);});return me;}; 
var CanadianCrudeViewModel = function (CanadianContext) { 
    var self = this; 
    self.canadiancrudes = ko.observableArray(); 
    self.products = ko.observableArray(); 
    self.datainput = ko.observableArray(); 
    self.loading = ko.observable(true); 

self.subsetcanadiancrudes = ko.observableArray(self.datainput()).extendsdistinct('Product'); 
     self.products = ko.computed(function() { 
     var products = ko.utils.arrayMap(self.subsetcanadiancrudes(), function (item) { 
      return item.Product; 
      }) 
     return ko.utils.arrayGetDistinctValues(products).sort(); 
     }); 
viewModel.canadiancrudes.push(obsCanadianCrude); 
     viewModel.subsetcanadiancrudes.push(obsCanadianCrude); 
     viewModel.canadiancrudes.sort(function (left, right) { return left.Product() === right.Product() ? 0 : (left.Product() < right.Product() ? -1 : 1) });