如何在Knockout.js中基于绑定值隐藏按钮

How to hide a button in Knockout.js based on bound value

本文关键字：绑定 按钮 隐藏 于绑定 Knockout js      更新时间：2023-09-26

我的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显式地设置内联显示样式?

好的，我找到了一些简单的方法来解决这个问题。最简单的方法可能是使用样式绑定:

<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来控制页面加载时各种元素的行为。

这个问题的快速解决方案如下:

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

查看更多关于样式绑定的信息。

总而言之，它是快速和肮脏的，如果你正在处理一个更大的项目/框架，你可能想要用Matt的答案。

我通常包装的一切，将在一个div集与display:none击倒绑定，然后要么使它可见(例如)jQuery之后的ko.applyBindings，或者使用自定义击倒绑定，使其可见链接到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();
        }
    }
}

这是一个演示小提琴

相关文章：