在html / knockout js中为表中的每个不同项创建部分

Question

我正在开发一个应用程序，在该应用程序中，我在html表中使用不同的产品和其他一些与之关联的数据，并使用knockout js绑定数据。以下代码不会在部分中显示产品，但每个产品都显示为不同的产品，尽管它们是相同的。

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>

从下面的屏幕截图中您可以看到我有不同的其他字段的类似产品，但它们没有分段。现在我想为每个产品设置一个部分，例如产品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) });