我的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 -->
任何建议表示感谢,谢谢。
答案 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 -->