web-dev-qa-db-ja.com

可視パラメーターをKnockoutの「or」ステートメントにバインドする

2つの条件のいずれかがtrueの場合、visibleプロパティをtrueにバインドしたいと思います。次のようなもの

 <tr data-bind="visible: active || $parent.displayDeactive">....</tr>

||他のバインディングを実行するとコードが機能しますが、||を実行すると機能しませんそこで。このバインディングにロジックを配置できるというドキュメントは見つかりませんでしたが、直接実行できない場合は、テンプレートのプロパティと$の1つのオブジェクトをバインドしているので、それを行うための最適な方法は何ですか？親ビューモデル。

javascriptknockout.js
27
PlTaylor

式でオブザーバブルの値を使用している場合は、それらを関数として参照する必要があります。したがって、activeとdisplayDeactiveが観測可能であれば、次のようにします。

data-bind="visible: active() || $parent.displayDeactive()"

ビューモデルに移動するにはいくつかの方法があります。

  • 子で計算されたオブザーバブルを作成します（関数は親を参照できる必要があります）
  • 子を取り込んで値を返す関数を親に作成します（バインディングは計算されたオブザーバブルで実行されるため、アクセスするオブザーバブルが変更されたときに再び呼び出されます）
  • 親を取り、値を返す子の関数を作成します（上記と同じメモ）

バインディングのロジックのサンプルと親の関数の使用： http://jsfiddle.net/rniemeyer/f6ZgH/

41
RP Niemeyer

それらを評価しているので、オブザーバブルの後に括弧を追加します。

<input type="checkbox" data-bind="checked:displayDeactive"> Display deactive</input>
<br/><br/>
<table>
    <tbody data-bind="foreach: products">
        <tr data-bind="visible: active() || $parent.displayDeactive()">
            <td><span data-bind="text:name"></span></td>
        </tr>
    </tbody>
</table>

ここで完全なコードを見つけることができます： http://jsfiddle.net/johnpapa/gsnUs/

式を評価するテンプレート化されたアイテムで計算されたプロパティを使用できます（@RPNiemeyerもそれで応答したのを見ただけです...私は+1しました）。

6
John Papa