KnockoutJS根据字符串值显示Yes/No文本异常问题求助

你遇到的问题大概率是两种常见情况导致的：要么isAvailable本身也是一个可观察对象（observable），要么初始状态下optionGroup里的isAvailable还未赋值，导致判断逻辑始终返回false。我给你几个实用的解决办法：

1. 先确认isAvailable是否为可观察对象 #

在KnockoutJS的模型设计里，对象的属性经常会被定义成可观察对象。如果你的模型实际是这样的：

this.optionGroup = ko.observable({
  isAvailable: ko.observable("true") // 这里是可观察对象而非普通字符串
});

那你直接用optionGroup().isAvailable拿到的是一个函数，而非字符串"true"，自然和'true'比较会返回false。这时候需要调用这个可观察对象来获取实际值：

<div data-bind="text: optionGroup().isAvailable() === 'true' ? 'Yes' : 'No'"></div>

2. 处理初始空对象的情况 #

如果optionGroup初始是ko.observable({})，那一开始isAvailable是不存在的，optionGroup().isAvailable会是undefined，和'true'比较也会返回false。你可以用可选链来规避这个问题：

<div data-bind="text: optionGroup()?.isAvailable === 'true' ? 'Yes' : 'No'"></div>

或者用Knockout的with绑定，确保只有optionGroup有值的时候才渲染判断逻辑：

<!-- 当optionGroup为空时，这个div不会渲染 -->
<div data-bind="with: optionGroup">
  <span data-bind="text: isAvailable === 'true' ? 'Yes' : 'No'"></span>
</div>

3. 使用计算可观察对象（更推荐） #

为了让逻辑更清晰、易于维护，你可以在ViewModel里定义一个计算可观察对象来封装显示逻辑：

this.displayAvailability = ko.computed(() => {
  const currentGroup = this.optionGroup();
  // 先判断对象是否存在，再检查isAvailable的值
  return currentGroup && currentGroup.isAvailable === 'true' ? 'Yes' : 'No';
});

然后在视图里直接绑定这个计算属性：

<div data-bind="text: displayAvailability"></div>

这种方式把业务逻辑从视图中抽离出来，后续如果需要修改判断规则（比如新增其他状态），只需要修改ViewModel里的代码即可。

你可以先检查一下isAvailable是否是可观察对象，这应该是最常见的问题~

内容的提问来源于stack exchange，提问作者user1809790