Я пытаюсь настроить общие шаблоны Knockout, которые можно переключать между режимами редактирования и чтения только в зависимости от типа данных. Если вы когда-либо использовали динамические данные 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