Скрытие набора строк таблицы html на кнопке

Question

Я работаю над приложением MVC Asp.Net, в котором у меня есть таблица html, в которой данные отображаются в группах, которые сгруппированы по имени продукта с помощью foreach loop in Knockout JS. Теперь я хочу реализовать кнопку скрыть и показать на стороне каждого имени продукта, что позволяет пользователю скрывать и видеть данные, связанные с этим продуктом, с помощью кнопки.

Сейчас следующая картина показывает, как поместить мой стол на веб-странице

На рисунке выше 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--> 

мой взгляд модель, как в ответ

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>