2017-10-24 4 views
1

ノックアウトのバインディングを同じ行の別のバインディングと組み合わせることはどういうことですか?条件が真であれば、divにのみバインディングを表示して実行したい。ユーザーがそれを見る権利がある場合、チャートは表示されるべきです。データバインディングを1行にバインドする場合のノックアウトの組み合わせ

私のチャートの定義は非常に単純です:

<div style="height:150px" data-bind="dxChart: chartSettings"></div> 

dxChartが結合する前に結合場合、私はちょうど追加することはできますか?または、このような文脈でバインディングする場合、コメントを使用することは避けられませんか?

<!-- ko if: hasRights --> 
<div style="height:150px" data-bind="dxChart: chartSettings"></div> 
<!-- /ko --> 
+1

2つを組み合わせた独自のカスタムバインディングを作るのは避けられないほどです。 controlsDescendantBindingsを使用する同じ要素に複数のバインディングを含めることはできません:true –

+1

これは基本的にDOMから要素を追加/削除するバインディングです。 "if"バインディングはそのカテゴリにあり、名前からはdxChartも同じように推測しています。 Nisargの示唆しているように、 "visible"バインディングはcssを変更して要素を隠すだけなので動作しますが、隠されていないとラッパー要素または仮想要素を使用する必要があります。 –

+0

ありがとうございました! –

答えて

0
<div style="height:150px" data-bind="dxChart: chartSettings, if: hasRights"> 
    ... Elements ... 
</div> 

これはdiv要素そのものではなく、div要素に含まれる要素だけに影響を与えません。

あなたが使用することができvisible結合 - (子供を含む)全体のdivを非表示になりますが、あなたが知っているかもしれないとして、それはDOMに追加されるのdivを防ぐことはできませんどの:

<div style="height:150px" data-bind="dxChart: chartSettings, visible: hasRights"> 
    ... Elements ... 
</div> 

だから、コメントベースのバインディング(containerless control flow syntax)にdivをラップすることも解決策の1つです。別の解決策は、ifバインディングを持つdivに折り返すことです。次のようなものがあります。

<div data-bind="if: hasRights"> 
    <div style="height:150px" data-bind="dxChart: chartSettings"> 
     ... Elements ... 
    </div> 
</div> 
関連する問題