如何让Knockout的visible绑定使用CSS visibility属性而非display:none

嘿，这个需求很实用！默认的Knockout visible绑定确实是用display: none来隐藏元素，直接把它从页面布局里移除了，但如果想要让隐藏的元素依然占据页面空间，我们可以通过自定义绑定轻松实现这个效果，毕竟Knockout的自定义绑定就是用来扩展这类原生不支持的行为的～

1. 注册自定义绑定 #

先在你的脚本里添加这段代码，创建一个新的绑定（我这里命名为visibility，你也可以改成自己喜欢的名字）：

ko.bindingHandlers.visibility = {
    update: function(element, valueAccessor) {
        // 解析绑定的布尔值（兼容observable和普通值）
        var shouldBeVisible = ko.unwrap(valueAccessor());
        // 根据值设置visibility属性：可见用"visible"，隐藏用"hidden"
        element.style.visibility = shouldBeVisible ? "visible" : "hidden";
    }
};

2. 在HTML中使用这个绑定 #

用法和原生的visible绑定完全一致，只是把data-bind="visible: xxx"替换成我们的自定义绑定即可：

<!-- 绑定到viewModel里的可观察属性 -->
<div data-bind="visibility: showThisElement">
    就算我被隐藏，也会乖乖占着页面位置哦！
</div>

<script>
    // 示例ViewModel
    var myViewModel = {
        showThisElement: ko.observable(false) // 初始状态为隐藏
    };
    ko.applyBindings(myViewModel);
</script>

可选：扩展额外逻辑 #

如果需要在显示/隐藏时添加动画、触发事件之类的额外操作，可以给自定义绑定加上init方法，或者在update里补充逻辑：

ko.bindingHandlers.visibility = {
    init: function(element, valueAccessor) {
        // 初始化时就设置好元素的初始可见性
        var initialVisibility = ko.unwrap(valueAccessor());
        element.style.visibility = initialVisibility ? "visible" : "hidden";
    },
    update: function(element, valueAccessor) {
        var shouldBeVisible = ko.unwrap(valueAccessor());
        element.style.visibility = shouldBeVisible ? "visible" : "hidden";
        
        // 比如添加淡入动画
        if (shouldBeVisible) {
            element.classList.add("fade-in-animation");
        } else {
            element.classList.remove("fade-in-animation");
        }
    }
};

这样就完全满足你的需求了——隐藏元素时它依然会在页面上保留自己的空间，和display: none的行为彻底区分开。

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