时间戳

首页 > 解决方案 > 使用 Knockout JS 动态显示/隐藏

knockout.js - 使用 Knockout JS 动态显示/隐藏

问题描述

我正在尝试使用 KnockoutJS 做一个简单的事情——当无线电组有'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 -->

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

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

标签： knockout.js

解决方案

因为您要绑定到函数表达式而不是简单地绑定到可观察对象，所以您必须使用括号解开表达式中的可观察对象。

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

推荐阅读