用淘汰JS动态显示 /隐藏

Question

我正在尝试使用QuintOutJS来尝试简单的事情 - 当无线电组具有'y'值时，动态显示一个部分。

'use strict';
console.log('running js..', ko);
var ViewModel = function() {
  this.termsAccepted = ko.observable('n');
};
// Bind our ViewModel to our View
ko.applyBindings(new ViewModel());

<script>console.log('loading knockout')</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script>console.log('knockout loaded')</script>
<h4>Dynamically hide / show section</h4>
<p>I would like to show a section when the terms are actually accepted, and hide it otherwise</p>
<p><strong>Terms accepted</strong> <span style="color: red" data-bind="text: termsAccepted"/></p>
<p><input type="radio" name="esign" value="y" data-bind="checked: termsAccepted"> <label for="esignTrue">I agree.</label>
<input type="radio" name="esign" value="n" data-bind="checked: termsAccepted"> <label for="esignFalse">I do not agree.</label></p>
<div data-bind="visible: termsAccepted">
  Only showing when terms are accepted...
</div>
<div data-bind="visible: termsAccepted === 'y'">
  Only showing when terms are accepted...
</div>
<!-- ko if: termsAccepted === 'y' -->
<div>
  Only showing when terms are accepted...
</div>
<!-- /ko -->

看起来很简单，但是这些部分并没有按预期隐藏/显示。

我已经验证了这不是因为使用此处提到的自关闭标签。

Answer 1

，因为您要绑定到函数表达式，而不是简单地对可观察的绑定，因此必须用Parens解开表达式中的可观察结果。

https://knockoutjs.com/documentation/binding-syntax.html

'use strict';
var ViewModel = function() {
  this.termsAccepted = ko.observable('n');
};
// Bind our ViewModel to our View
ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<h4>Dynamically hide / show section</h4>
<p>I would like to show a section when the terms are actually accepted, and hide it otherwise</p>
<p><strong>Terms accepted</strong> <span style="color: red" data-bind="text: termsAccepted"/></p>
<p><input type="radio" name="esign" value="y" data-bind="checked: termsAccepted"> <label for="esignTrue">I agree.</label>
<input type="radio" name="esign" value="n" data-bind="checked: termsAccepted"> <label for="esignFalse">I do not agree.</label></p>
<div data-bind="visible: termsAccepted() === 'y'">
  Only showing when terms are accepted...
</div>
<!-- ko if: termsAccepted() === 'y' -->
<div>
  Only showing when terms are accepted...
</div>
<!-- /ko -->