1

さて、ユーザーが入力したデータのインライン検証を表示するために、KO スタイル バインディングを広範囲に使用しました。これが私のバインディングの1つです：

data-bind='style: {backgroundPosition: ! currentRegistry().title() || !$root.currentRegistry().clientLogin()  ? "top" : "bottom"}

私が抱えている問題は、このようなバインディングを行いたいということです。ただし、2 番目のスタイル バインディングでは、if ステートメントが false と評価された場合、前のバインディングによって設定された背景位置に戻るようにしたいと考えています。単に「下」に戻るのではなく:

data-bind='style: {backgroundPosition: ! currentRegistry().title() || !$root.currentRegistry().clientLogin()  ? "top" : "bottom"}, style: {backgroundPosition: currentRegistry().title() && $root.currentRegistry().clientLogin() && ! $root.hasRegImage()  ? "20px" : "bottom"}'

つまり、2 番目のバインドでは、style: {backgroundPosition: if stuff ? "THIS"} そうでなければスタイルを変更しないでください。それが理にかなっていることを願っています。これを実現するためのヒントや指針をいただければ幸いです。ありがとう。

編集：

RodneyTrotter のソリューションは間違いなく、これと同じ機能を実現するためのよりエレガントな方法ですが、私が求めていたことを正確に実行する方法を同僚から学びました。各プロパティを条件付きにすることができることに気づきませんでした。

data-bind='style: {backgroundPosition: ! $root.currentRegistry().clientLogin() || ! $root.currentRegistry().title()  ? "top" :  (! $root.hasRegImage()  ? "20px" : "bottom")}'>
4

3 に答える 3

2

これを実現するために css バインディングを使用します (注: 目的の結果を得るには、css クラスの順序をいじる必要がある場合があります)。

HTML

<div id='myElement'
    data-bind='css: {
        'foo': !currentRegistry().title() || !$root.currentRegistry().clientLogin(), 
        'bar': currentRegistry().title() && $root.currentRegistry().clientLogin() && ! $root.hasRegImage()
    }'>
    Hello, i am the div content.
</div>

CSS

#myElement{
    background-position: bottom;
}

#myElement.foo {
    background-position:top;
}

#myElement.bar {
    background-position:20px;
}
于 2013-06-03T23:01:01.850 に答える
2

これがあなたの質問に正確に答えているかどうかは100％確信が持てませんが、これも有効で非常に役立ちます：

'style': someCondition ? {'max-height': '100px'} : {}

条件が満たされない場合は、スタイリングをそのままにしておくことができます。

さらに、コンポーネントを使用している場合は、呼び出すことができます

'style': $component.getStyling($data)

次に、getStyling複数行の if-statement ロジックを実行して、スタイリングを保持するオブジェクトを構築します。

同じことがcssバインディングにも当てはまります。

于 2017-09-20T16:23:30.427 に答える