Question

我试图为Knockout observable设置带有display: none属性的CSS类，但没有赋值。

HTML code：

    <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*。

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

但没有运气。

我的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属性而不是函数（也使用更多可关联的属性名称 - ＆＃34; CssBind＆＃34;绝对没有任何意义）

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绑定。

Knockout：根据可观察值更改CSS可见性

1 个答案: