1

編集可能と編集不可を切り替える単純なテンプレートがあります。基本的に、入力フィールドを非表示にしてスパンを表示するか、その逆です。

<script type="text/html" id="inputTextTemplate">
    <input type="text" data-bind="value: field, visible: $data.isEdit" />
    <span data-bind="text: field, visible: !$data.isEdit"></span>
</script>

JQuery を介して適用するスタイルもいくつかありますが、問題は、テンプレートが編集可能から編集可能に切り替わるたびに再レンダリングされ、それらのスタイルが失われることです。

これが問題の jsFiddle です。

http://jsfiddle.net/uCWx4/4/

なぜこうなった？テンプレートが一度だけレンダリングされるようにするにはどうすればよいでしょうか?

4

3 に答える 3

2

問題は、観測可能な値ではなく、値を送信していたことのようです。オブザーバブルまたは計算を作成すると、テンプレートは1回だけレンダリングされます。したがって、テンプレートを呼び出す前は

isEdit: isEdit() == 'true'

計算されたものを作成する場合

this.isEditable = ko.computed(function(){
    return self.isEdit() == 'true';
});

そしてそれを

isEdit: isEditable

期待どおりに動作します。

http://jsfiddle.net/uCWx4/8/

于 2012-11-28T16:11:12.037 に答える
1


次のことができます:
HTML コード これとこれ
のような両方のコントロールに css クラスを追加しましたcss: { first: $data.isEdit }css: { second: !$data.isEdit } 

    <script type="text/html" id="inputTextTemplate">
        <input type="text" data-bind="css: { first: $data.isEdit }, value: field, visible: $data.isEdit" />
        <span data-bind="css: { second: !$data.isEdit }, text: field, visible: !$data.isEdit">   </span>
    </script>


そしていくつかのCSS

​.first{
  color: red;
}
.second{
  color: blue;
}

<br/> css バインディングに関する公式ドキュメントをお読みください

また、ここにDEMO

があり ます。

于 2012-11-28T15:27:48.727 に答える
0

You fiddle には実際には jQuery を介して適用されるスタイルはありませんが、withを使用すると同様の問題が発生しました。

解決策は、それをしないことです。代わりに ViewModel のオブザーバブルを使用して、テンプレートにスタイルを適用できるかどうかを検討してください。そうしないと、テンプレートを再レンダリングするたびに、jQuery を介してこれらのスタイルを再適用する必要があります。

于 2012-11-28T15:17:17.200 に答える