0

我的 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; }

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

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

4

3 回答 3

2

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

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

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

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

<body class="loading">

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

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

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

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

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

于 2013-03-21T20:14:30.730 回答
1

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

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

这是一个演示小提琴

于 2013-03-21T19:48:16.253 回答
1

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

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

在此处查看有关样式绑定的更多信息。

综上所述，它又快又脏，如果您正在使用更大的项目/框架，您可能想要使用 Matt 的答案。

于 2013-03-21T20:11:21.160 回答