テンプレート内の$ dataの双方向バインディングを取得する

Question

データタイプに基づいて編集モードと読み取り専用モードの間で切り替えることができる包括的なノックアウトテンプレートを設定しようとしています。 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> 

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

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

アイデアのようなフィールドレベルでテンプレートを使用できるようにすることです：次のビューモデルで

<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> 

明示的な要素/コントロールではなく、 "Name2"の例で使用します。これにより、大部分が重複したマークアップの大部分を持たずに、フォーム全体を編集モードと読み取りモードの間で簡単に切り替えることができます。これはまた、鋳型内部$data擬似変数バインディング双方向ていない問題

等、例えば、日付フィールドのdatepickersを使用して、共通データタイプ編集/表示マークアップの再利用を可能にします。これはオブザーバブルの現在の値を反映しますが、入力コントロールの変更によって値が設定されることはありません。

$dataではどのようにして双方向バインディングを取得できますか？

も参照してくださいthis jsfiddle

Answer 1

最も簡単な選択肢はそれはあなたが実際に観察のようにアクセスすることを可能にするバインディングオブジェクトをテンプレートに渡すことです：

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

次に、「フィールド」の代わりに "に対するバインドを$ data "をテンプレートに追加します。考慮すべき

もう一つは、あなたがのように編集/表示用に別のテンプレートを使用することができ、あなたのテンプレートを決定するための機能を使用することになります
http://www.knockmeout.net/2011/03/quick-tip-dynamically-changing.html