ノックアウト：観察可能な値に基づいて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> 

とノックアウトコンストラクタ：

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

その後、私は明らか値

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

/display: noneを追加設定します、私はCSSを追加したい、その時点ですべてのuser*クラスに。これら二つの質問Knockout: Change css class based on value of observable

が、運のない

knockout set css conditionally

から

私が続いているソリューションを提供しています。

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

（また、より多くの関係づけプロパティ名を使用 - "CssBindは" 絶対に何を意味する）関数の代わりにcomputedプロパティを使用し

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バインディングを試す必要はありません。