6

データ型に基づいて編集モードと読み取り専用モードを切り替えることができる汎用ノックアウトテンプレートをセットアップしようとしています。ASP.NETの動的データを使用したことがある場合：それはフィールドテンプレートのようなものです。例えば：

<script type="text/html" id="text">
    <!-- ko if: $root.editable -->
        <input type="text" data-bind="value: $data" />
    <!-- /ko -->

    <!-- ko ifnot: $root.editable -->
        <span data-bind="text: $data"></span>
    <!-- /ko -->
</script>

これは次のように使用されます。

<label><input type="checkbox" data-bind="checked: editable" /> Editable</label>

<p>Name: <input data-bind="value: name" /></p>
<p>Name2: <span data-bind="template: { name: 'text', data: name }"></span></p>

次のビューモデルを使用します。

    var viewModel = {
        name: ko.observable("Brian"),
        editable: ko.observable(true)
    };

アイデアは、明示的な要素/コントロールの代わりに、「Name2」の例のようにフィールドレベルでテンプレートを使用できるようにすることです。これにより、ほとんど重複するマークアップの大きなセクションがなくても、フォーム全体を編集モードと読み取りモードの間で簡単に切り替えることができます。これにより、たとえば日付フィールドに日付ピッカーを使用するなど、一般的なデータ型の編集/表示マークアップを再利用することもできます。

問題
テンプレート内 の$data疑似変数には双方向バインディングがありません。オブザーバブルの現在の値を反映しますが、入力コントロールの変更は値を設定しません。

どうすれば双方向バインディングを取得でき$dataますか？

このjsfiddleも参照してください

4

1 に答える 1

7

最も簡単な選択は、次のような実際のオブザーバブルにアクセスできるようにするテンプレート バインディングにオブジェクトを渡すことです。

template: { name: 'text', data: {field: name} }

次に、テンプレートの「$data」ではなく「field」に対してバインドします。

考慮すべきもう1つのことは、関数を使用してテンプレートを決定することです。その後、次のように編集/表示用に個別のテンプレートを使用できます
。

于 2012-01-24T15:59:14.963 に答える