淘汰最佳做法。如果或可见

Question

在本例中，我正在寻找淘汰赛是否或可见的最佳实践：

<div data-bind="visible: $root.obsVar()">
    ...
    <input type="text" data-bind="value: $root.obsVar().someField" />
    ...
</div>

如果$root.obsVar()未定义，则会引发错误。如果您将visible更改为if，那么问题将失败，但它需要重写html。如果在div中出现了大量的模糊，这需要大量的时间。是否有任何理由将$root.obsVar().someField更改为总是返回正确值或未定义的$root.getSomeFieldValue？或者，也许还有其他一些技术可以避免开销和避免错误。

Answer 1

这取决于实际情况。来自文档

if扮演着与visible绑定类似的角色。区别在于，对于visible，包含的标记始终保留在DOM中，并且始终应用其data-bind属性-- visible绑定只是使用CSS来切换容器元素的可见性。然而，if绑定物理上添加或删除了DOM中包含的标记，并且仅在表达式为真的情况下将绑定应用于后代。

在您的场景中，当if为null时，防止错误不使用someField的唯一方法是执行以下操作：

data-bind="value: ($root.obsVar() == null) ? null : $root.obsVar().someField"

每次访问属性时都必须编写，这真的很烦人。它使代码更难维护，并且更容易出错--尤其是当您向obsVar的属性添加新绑定时，因为您必须记住执行空检查。

除非您看到在您的情况下使用visible会带来一些明显的性能好处，否则我建议使用if，因为这样您只需要在一个地方而不是多个地方写支票。

Answer 2

你可能会发现你需要两者兼用。

使用if从DOM中删除标记--防止可能的JS错误，这样就不会占用页面上的空间。

然后使用visible隐藏元素，直到页面完全加载。

<!-- ko if: whatever -->
<div data-bind="visible: true" style="display: none">
    my content
</div>
<!-- /ko -->

Answer 3

尝试使用没有()的$root.obsVar。这应该适用于如果或可见的话。两者的区别在于，“可视”只是隐藏div，这个div仍将存在于DOM中，而"if“则将其排除在DOM之外。