使一个元素可见,具体取决于淘汰中另一个元素的值

时间:2018-07-17 08:51:12

标签: javascript knockout.js knockout-validation

我的HTML中包含三个元素:问题,得分和评论。得分是HTML SELECT,带有“差”,“好”和“优秀”作为选项。

如果分数是 不是 =“好”,我只希望注释字段可见。

<!-- 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 -->

任何建议表示感谢,谢谢。

2 个答案:

答案 0 :(得分:0)

您如何修改此行:

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

类似于:

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

,然后在您的代码中添加类似内容:

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

答案 1 :(得分:0)

我认为只有在所选得分与值“好”不同时,评论文本框才可见。

为此,必须跟踪所选值并将其绑定到列表框, 通过属性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 -->