如何根据绑定值隐藏 Knockout.js 中的按钮答案

【问题标题】：How to hide a button in Knockout.js based on bound value如何根据绑定值隐藏 Knockout.js 中的按钮
【发布时间】：2013-03-21 19:32:39
【问题描述】：

我的 HTML 模板中有以下按钮，我只想在 CanCancel 为真时显示：

<button data-bind="click: CancelProject, visible: CanCancel">Cancel Project</button>

问题是模型绑定需要1-2秒，所以我实际上看到按钮几秒钟，然后当数据完全绑定时它就消失了。如果CanCancel 为真，我希望按钮被隐藏，然后出现。

我尝试过使用 CSS 来设置按钮的初始状态：

<button class="hidden" data-bind="click: CancelProject, visible: CanCancel">Cancel Project</button>

在我的 CSS 中：

DIV.buttons button.hidden { display: none; }

但是，当我这样做时，我永远看不到按钮。这是因为如果值为 true，Knockout.js 不会用 display: inherit; 覆盖按钮的内联样式。

有没有办法让 Knockout 无论如何都明确设置内联显示样式？

【问题讨论】：

标签： javascript html css knockout.js

【解决方案1】：

好的，我找到了一些简单的方法来解决这个问题。可能最简单的方法是使用style binding：

<button class="hidden" data-bind="click: CancelProject, style: { display: CanCancel ? 'inherit' : 'none' } ">Cancel Project</button>

hidden CSS 选择器会将初始状态设置为隐藏，并且绑定的内联样式将在模型绑定时覆盖此设置。

第二种方式可能更灵活一些。我在<body> 标签中添加了一个 CSS 类：

<body class="loading">

现在，我可以在页面加载时隐藏某些元素：

BODY.loading DIV.buttons { display: none; }

最后，当我绑定数据时，我可以删除类：

ko.applyBindings(model);
$(document.body).removeClass('loading');

这将使我能够准确控制使用纯 CSS 加载页面时各种元素的行为方式。

【讨论】：

【解决方案2】：

对此的快速而肮脏的解决方案如下：

<button class="hidden" data-bind="click: CancelProject, style: { display: CanCancel ? 'inherit' : ''}">Cancel Project</button>

查看更多关于样式绑定here.

总而言之，它又快又脏，如果您正在使用更大的项目/框架，您可能想要使用 Matt 的答案。

【讨论】：

【解决方案3】：

我通常使用display:none 将所有将被淘汰赛绑定的内容包装在一个div 集中，然后在ko.applyBindings 之后使用（例如）jQuery 使其可见，或者使用自定义淘汰赛绑定来制作它可见链接到 loaded、ready 或类似属性（如果您的 VM 涉及通过 AJAX 加载数据时很有用），甚至只是我的视图模型中的 with 绑定。

这是一个简单的自定义绑定，它使用 jQuery 的 .show() 使元素可见，即使它最初设置为 display:none：

ko.bindingHandlers["realVisible"] = {
    init: function(element, valueAccessor) {
        var val = ko.utils.unwrapObservable(valueAccessor());
        if (val) {
            $(element).show();
        }
        else {
            $(element).hide();
        }
    },
    update: function(element, valueAccessor) {
        var val = ko.utils.unwrapObservable(valueAccessor());
        if (val) {
            $(element).show();
        }
        else {
            $(element).hide();
        }
    }
}

这是一个演示 fiddle

【讨论】：

哦，就像隐藏整个 UI 直到所有内容都被数据绑定？这可能不是一个坏主意..