使一个元素可见取决于另一个元素在 knockout 中的值

Question

我的 HTML 中有三个元素，即问题、分数和评论。分数是 HTML SELECT，其中有 "Poor"、"Good" 和 "Excellent" 选项。

我只希望评论字段在分数为而非 = "Good" 时可见。

<!-- ko foreach: questions -->
  <tr>
      <td data-bind="text: question"></td>
      <td><select data-bind="options: availableScores"></select></td>
      <td>
         <!-- ko if: availableScores() != 'Good' -->
             <input data-bind="textInput: comment" />
         <!-- /ko -->
      </td>
  </tr>
 <!-- /ko -->

感谢任何建议，谢谢。

Answer 1

你如何修改这一行：

 <!-- ko if: availableScores() != 'Good' -->

类似于：

 <!-- ko if: displayComments() -->

并在您的代码中添加如下内容：

this.displayComments = ko.computed(function(){ return this.availableScores() !== 'Good'; });

Answer 2

我假设评论文本框必须仅在 selected 分数与值 'Good' 不同时才可见。

为此，必须跟踪所选值并将其绑定到列表框，下面通过属性 selectedScore.

一个最小的 MCVE 显示了这种行为。

var Question = function() {

  _self = this;
  _self.question = "";
  _self.comment = ko.observable("");
  _self.availableScores = ["Good", "Poor", "Excellent"];
  _self.selectedScore = ko.observable("Good");
}

var vm = new Question();
ko.applyBindings(vm);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<select data-bind="options: availableScores, value: selectedScore"></select>
  
<!-- ko if: selectedScore() != 'Good' -->            
Comment: <input data-bind="textInput: comment" />
<!-- /ko -->

使一个元素可见取决于另一个元素在 knockout 中的值

Make one element visible depending on the value of another in knockout

javascript

knockout.js

knockout-validation