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

Question

我正在尝试为 Knockout observable 设置 CSS class display: none 属性，它没有分配任何值。

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，这将 set/add display: none 到所有 user* classes.

我已经遵循了这两个问题的解决方案

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 绑定。对于这样一个简单的任务，不需要 fiddle 和 CSS 绑定。

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

Knockout: Change CSS visibility based on observable value

knockout.js

knockout-3.0