KnockOut.js中ko if虚拟绑定使用||或运算符不生效问题

你踩了Knockout.js初学者最常见的observable取值坑：
如果$root.valueA和$root.valueB是通过ko.observable()定义的响应式变量，直接在绑定表达式里写变量名，拿到的是observable包装函数本身，不是变量存储的实际值。
你觉得单条件判断“正常运行”其实是误判：函数本身在JS里永远是真值，不管你存的实际布尔值是true还是false，单写$root.valueA判断永远为真，刚好符合你某一个场景下的预期，你才会觉得功能正常。一旦加上||逻辑，首先表达式不会正确取到两个变量的实际值做判断，其次Knockout无法正确追踪两个observable的变更触发绑定更新，自然就达不到你要的显示/隐藏效果。

所有在绑定表达式里使用的observable值，都要加括号调用，拿到实际存储的值之后再做逻辑运算，修改后的虚拟绑定代码如下：

<!-- ko if: $root.valueA() || $root.valueB() -->
<p>
   Show this message.
</p>
<!-- /ko -->

如果判断逻辑后续还要扩展，不建议把长逻辑直接写在模板绑定里，可以在对应的viewModel上定义一个computed计算属性统一处理判断逻辑：

// root viewModel 内新增
this.showTargetParagraph = ko.computed(function() {
  // 这里同样要记得给observable加括号取值
  return this.valueA() || this.valueB();
}, this);

之后模板里直接绑定这个计算属性即可，代码更易维护，也不容易漏写括号：

<!-- ko if: $root.showTargetParagraph -->
<p>
   Show this message.
</p>
<!-- /ko -->

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