淘汰赛最佳实践。如果或可见答案

【问题标题】：Knockout best practices. If or visible淘汰赛最佳实践。如果或可见
【发布时间】：2017-06-19 22:41:12
【问题描述】：

我正在寻找在这种情况下淘汰 if 或 visible 最佳实践：

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

如果$root.obsVar()未定义，则会抛出错误。如果您将visible 更改为if，则会遗漏问题，但需要重写html。如果div 中有很多 murkup，则需要很长时间。是否有任何理由将 $root.obsVar().someField 更改为 $root.getSomeFieldValue 始终返回正确值或未定义？或者也许还有其他技术可以避免开销并避免错误。

【问题讨论】：

在这种情况下，if 或 with 将是更正确的做法。它应该也很容易做到。

标签： javascript optimization knockout.js

【解决方案1】：

这真的取决于场景。来自docs：

if 与visible 绑定的作用相似。不同之处在于，visible 包含的标记始终保留在 DOM 中，并且始终应用其 data-bind 属性 - visible 绑定仅使用 CSS 来切换容器元素的可见性。但是，if 绑定会在物理上添加或删除 DOM 中包含的标记，并且仅在表达式为 true 时才将绑定应用于后代。

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

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

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

除非您发现在您的情况下使用 visible 可以带来明显的性能优势，否则我的建议是使用 if，因为这样您只需在一个地方而不是多个地方写检查。

【讨论】：

非常感谢。我担心会错过一些组织 js 代码的真正方法。

【解决方案2】：

您可能会发现两者都需要使用。

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

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

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

【讨论】：

这是正确的回应，谢谢

【解决方案3】：

尝试使用不带 () 的 $root.obsVar。这应该适用于 if 或 visible 。两者的区别在于，“可见”只是隐藏了 div，它仍然会存在于 DOM 中，而“如果”则将其排除在 DOM 之外。

【讨论】：

问题不在$root.obsVar() 而是在$root.obsVar().someField 因为无法得到someField 的undefined。但是如果使用if，那么这部分代码不存在，代码也不会运行。

【解决方案4】：

正如 David Sherret 的回答中所述，主要区别在于 if 的 DOM 元素会在条件不满足时消失，而 visible 它们只是隐藏起来，但始终存在于 DOM 树中。

主要结果是，如果您使用if 并且必须处理事件，则必须使用委托事件，或者在每次重新创建元素时附加它们。当你使用 KO 时，你通常不做事件处理，因为你使用了像 click 这样的绑定，它是由 KO 处理的，所以你没有这个问题。但是你可能会涉及到一些其他的框架，比如验证器、jQuery UI 日期选择器等等，它们在使用 KO 的if 时会出现问题。

【讨论】：