Uzyskiwanie dwukierunkowego wiązania danych $ wewnątrz szablonu

Question

Próbuję skonfigurować ogólne szablony Knockout, które mogą być przełączane między trybem edycji i tylko do odczytu na podstawie typu danych. Jeśli kiedykolwiek korzystałeś z dynamicznych danych ASP.NET: to jest jak ich szablony pól. Na przykład:

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

Służy tak:

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

z poniższym widoku modelu

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

Chodzi o to, aby móc korzystać z szablonów na poziomie pola jak w przykładzie "Name2" zamiast wyraźnych elementów/formantów. Pozwala to na łatwe przełączanie całych formularzy między trybem edycji i odczytu bez dużych fragmentów w większości zduplikowanych znaczników. Pozwala to również ponownego wykorzystania danych typu wspólnej edycji/wyświetlania znaczników, na przykład za pomocą datepickers dla pól data, itp

Problem
$data pseudo zmiennej w szablonie nie ma wiążącego dwukierunkowy. Będzie odzwierciedlać aktualną wartość obserwowalnego, ale zmiany w sterowaniu wejściowym nie ustawią tej wartości.

Jak uzyskać dwukierunkową oprawę na $data?

Zobacz również this jsfiddle

Answer 1

Najprostszym rozwiązaniem jest przekazać obiekt do szablonu wiązanie, które umożliwia dostęp do rzeczywistego zaobserwować jak:

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

Następnie wiążą przeciw „pola” zamiast " $ data "w twoim szablonie.

Kolejną rzeczą wymagającą rozważenia byłoby przy użyciu funkcji do ustalenia szablonu, a następnie można użyć osobne szablony do edycji/widoku jak:
http://www.knockmeout.net/2011/03/quick-tip-dynamically-changing.html