Question

我正在开发一个Asp.Net MVC应用程序，其中我有一个html表，其中数据显示在按产品名称使用foreach loop in Knockout JS分组的组中。现在，我想在每个产品名称的侧面实现一个隐藏和显示按钮，使用户可以使用按钮隐藏和查看与该产品相关的数据。

现在，下面的图片显示了我的表格如何放在网页上 enter image description here

在上图中，Heavy, Sweet,Sour是我的products，它们会突出显示，并且在其下方有一些数据行，应该会在点击按钮时隐藏。

我使用以下脚本来构建html表中的数据

 <!--ko foreach: productshorizontal-->
            <tr>
                <td class="clientproductHeader" data-bind="text: $data"></td>
 <td><input type="submit" class="btn btn-danger clientproductHeader" value="Hide"></td>
                <td class="clientproductHeader" colspan="13"></td>
            </tr>
            <tbody data-bind="foreach: ko.observableArray($root.datainputhorizontal()).extendsdistinct('Product').index.Product()[$data]">
                <tr>
                  <td data-bind="text: Grade"></td>
                  <td data-bind="text: Term"></td>
                  <td data-bind="text:Pipeline"></td>
                  <td data-bind="text: Index"></td>
                  <td data-bind="text: Bid3"></td>
                  <td data-bind="text: Bid2"></td>
                  <td data-bind="text: Bid1"></td>
                  <td data-bind="text: Ask1"></td>
                  <td data-bind="text: Ask2"></td>
                  <td data-bind="text: Ask3"></td>
                </tr>
            </tbody>
            <!--/ko-->

My View模型，如答案

var CanadianCrudeViewModel = function (CanadianContext) {
    var self = this;


    self.productshorizontal = ko.observableArray();
----
----
----

self.productshorizontal = ko.computed(function () {
        var productshorizontal = ko.utils.arrayMap(ko.observableArray(self.datainputhorizontal()).extendsdistinct('Product')(), function (item) {
            return item.Product;
        })
        return ko.utils.arrayGetDistinctValues(productshorizontal);
    }, this);


    ProductViewModel = function (name) {
        this.name = name;
        this.isRelatedDataVisible = ko.observable();
    }
    function RootViewModel(data) {
        var productModels = data.map(function(name) {
            return new ProductViewModel(name);
        });
        this.productshorizontal = ko.observableArray(productModels);

        this.toggleReleatedDataVisible = function (prod) {
            prod.isRelatedDataVisible(!prod.isRelatedDataVisible());
        }
    }

和html是asfollows

<!--ko foreach: productshorizontal-->
   <tr>
     <td class="clientproductHeader" data-bind="text: name"></td>
     <td><input type="button" class="btn btn-danger clientproductHeader" data-bind="click: toggleReleatedDataVisible"></td>
     <td class="clientproductHeader" colspan="13"></td>
   </tr>
   <!-- ko if: isRelatedDataVisible -->
     <tbody data-bind="foreach: ko.observableArray($root.datainputhorizontal()).extendsdistinct('Product').index.Product()[$data]">
       ....
     </tbody>
   <!-- /ko -->
<!-- /ko -->

但问题是在javascript控制台中它给我一个例外

Error: Cannot find closing comment tag to match: ko if: isRelatedDataVisible

不确定原因

Answer 1

您可以将visible绑定与click绑定结合使用：

要隐藏/显示的行应该具有绑定到可观察对象的可见事物。每当用户单击一个按钮（按钮应该具有单击绑定）时，它可以更新可观察的行的值，使得行可见或不可见。

您可以在此fiddle

中了解相关信息

    <tbody data-bind="foreach: people">
        <tr data-bind="visible: $parent.hideArray.indexOf(myParent) == -1">
            <td data-bind="text: name"></td>
            <td data-bind="text: surname"></td>
            <td>
                <button data-bind="visible: !myParent, click: $parent.showHide, text: buttonText"></button>
            </td>
        </tr>
    </tbody>

在按钮单击上隐藏html表行集

1 个答案: