根据淘汰赛中另一个元素的值使一个元素可见

Posted

技术标签:

【中文标题】根据淘汰赛中另一个元素的值使一个元素可见【英文标题】:Make one element visible depending on the value of another in knockout 【发布时间】:2018-12-24 21:34:11 【问题描述】:

我的 html 中有三个元素:问题、分数、评论。 Score 是一个 HTML SELECT,有“Poor”、“Good”和“Excellent”作为选项。

我只希望在分数为 not = "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 -->

任何建议表示赞赏,谢谢。

【问题讨论】:

【参考方案1】:

我假设评论文本框只有在 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 -->

【讨论】:

如何收集问题?我的“调查”有 5 个“问题”。我倾向于将您的 Question 函数更改为 observableArray,但这会否定函数内部的操作。 (可能不是最好的描述,但我对整个 javascript 世界完全陌生) 您需要一个父视图模型(例如,Survey),其中包含一系列问题视图模型实例,您可以在循环中呈现这些实例。 knockoutjs.com/examples/cartEditor.html 的购物车和购物车示例显示了这样的设置。【参考方案2】:

如何修改这一行:

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

类似于:

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

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

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

【讨论】:

我很难理解计算函数返回的内容。根据元素#1 是否具有特定值,元素#2 必须显示或不显示。我不明白这个功能有什么帮助?评论是一种输入。 我的回答的重点是,您应该将逻辑包装在某些函数中,而不是在淘汰赛 html 中进行比较,如果我过去也遇到过一些问题,我记得甚至有一些问题这个 html if 结构的实现,我不得不用 div 包裹我想隐藏的块并使用data-bind

以上是关于根据淘汰赛中另一个元素的值使一个元素可见的主要内容,如果未能解决你的问题,请参考以下文章

淘汰赛在点击时切换活动类

是 DOM 中另一个元素之前还是之后的元素

根据打字稿中另一个数组的值过滤数组

Lambda 表达式 - 根据集合中另一个属性的值设置对象集合中一个属性的值

检查一个数组是不是包含 JavaScript 中另一个数组的任何元素

检查一个数组是不是包含 JavaScript 中另一个数组的任何元素