Question

我的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无论如何都明确设置内联显示样式？

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

Answer 2

我通常在display:none的div集中包装将被敲除绑定的所有内容，然后在ko.applyBindings之后使用（例如）jQuery使其可见，或者使用自定义敲除绑定使其可见链接到loaded，ready或类似属性（如果您的VM涉及通过AJAX加载数据，则非常有用），甚至只是我的视图模型中的with绑定。< / p>

这是一个简单的自定义绑定，使用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

Answer 3

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

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

详细了解样式绑定here.

所有这一切都说，它快速而且肮脏，如果您正在使用更大的项目/框架，您可能想要使用Matt的答案。

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

3 个答案: