Knockout.js中if和visible绑定的最佳实践

在特定场景下，寻找使用 Knockout.js 的 if 或 visible 绑定的最佳实践：

示例代码如下：

    ...
    
    ...

当 $root.obsVar() 未定义时，会引发错误。若将 visible 更改为 if，虽然可以解决问题，但需要重写 HTML 代码。如果 div 内含有大量标记，则需要花费较多时间。考虑是否应将 $root.obsVar().someField 更改为 $root.getSomeFieldValue，后者始终返回正确值或未定义？或者是否有其他技术可以减少开销并避免错误？

解决方案

#1

这取决于具体场景。根据官方文档：

if 与 visible 绑定的作用相似。不同之处在于，visible 绑定仅通过 CSS 切换容器元素的可见性，而 if 绑定则会在 DOM 中物理地添加或移除包含的标记，并且仅在表达式为真时应用绑定。

在您的场景中，如果 someField 为 null，不使用 if 而防止错误的方法是：

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

每次访问属性时都需要这样写，这会使代码难以维护，并容易出错。除非在使用 visible 时有明显的性能优势，否则建议使用 if，因为只需在一个地方进行检查，而不是多处。

#2

如 David Sherret 所述，主要区别在于 if 绑定会在条件不满足时从 DOM 中移除元素，而 visible 绑定仅隐藏元素，但仍保留在 DOM 树中。

使用 if 时，如果需要处理事件，必须使用委托事件或每次重新创建元素时重新绑定。但在使用 KO 时，通常使用 click 等绑定来处理事件，因此不会遇到此问题。然而，如果涉及其他框架（如验证器、jQuery UI 日期选择器等），可能会与 KO 的 if 绑定不兼容。

#3

尝试使用 $root.obsVar 而不是 $root.obsVar()。这应该适用于 if 或 visible。两者的区别在于 visible 绑定仅隐藏元素，而 if 绑定会将其从 DOM 中移除。

#4

有时需要同时使用 if 和 visible：

使用 if 从 DOM 中移除标记，以防止可能的 JS 错误，并节省页面空间；使用 visible 在页面完全加载前隐藏元素。

    my content