淘汰赛：根据可观察值更改 CSS 可见性

Question

我正在尝试为未分配值的 Knockout observable 设置具有 display: none 属性的 CSS 类。

HTML 代码：

    <div class="userParent actionHandle dragHandle">
        <span class="userName" data-bind="text: userName"></span><span class="userDOB" data-bind="text: userDOB"></span><span class="userGender" data-bind="text: userGender"></span>
    </div>  

和 Knockout 构造函数：

    this.userName = ko.observable('');
    this.userDOB = ko.observable('');
    this.userGender = ko.observable('');    

然后我清除值

    this.userName('');
    this.userDOB('');
    this.userGender('');

此时我想附加 CSS，它将设置/添加 display: none 到所有 user* 类。

我已经按照这两个问题的解决方案

• knockout set css conditionally
• Knockout: Change css class based on value of observable

但没有运气。

我的 CSS 更改代码如下所示

self.CssBind = function (k) {

var CssBind = '';

if (self.userName() === '') {
     CssBind = 'none';
}
if (self.userDOB() === '') {
     CssBind = 'none';
}
if (self.userGender() === '') {
     CssBind = 'none';}

 return CssBind;
});

并更改了 HTML

 <div class="userParent actionHandle dragHandle">
        <span class="userName" data-bind="text: userName, style: {display $root.CssBind}"></span><span class="userDOB" data-bind="text: userDOB, style: {display $root.CssBind}"></span><span class="userGender" data-bind="text: userGender, style: {display $root.CssBind}"></span>
    </div>  

我认为我错过了一些简单的东西。

Answer 1

使用computed 属性而不是函数（也可以使用更多相关的属性名称——“CssBind”意味着什么都没有）

self.everythingIsFilledIn = ko.pureComputed(function () {
    return self.userName() > '' && self.userDOB() > '' && self.userGender() > '';

    // or, for short
    // return self.userName() && self.userDOB() && self.userGender();
});

在视图中：

<div class="userParent actionHandle dragHandle" data-bind="visible: everythingIsFilledIn">
    <span class="userName" data-bind="text: userName"></span>
    <span class="userDOB" data-bind="text: userDOB"></span>
    <span class="userGender" data-bind="text: userGender"></span>
</div> 

如果您想根据某个真值显示或隐藏元素，请使用visible 绑定。对于这样一个简单的任务，无需摆弄 CSS 绑定。