Получение двухсторонней привязки к $ data внутри шаблона - PullRequest
Новая
       24

Получение двухсторонней привязки к $ data внутри шаблона

6 голосов
/ 24 января 2012

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

1 Ответ

7 голосов
/ 24 января 2012

Самый простой выбор - передать объект в привязку шаблона, который позволяет вам получить доступ к фактической наблюдаемой, например: 

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

Затем, связать с «полем» вместо «$ data» в вашем шаблоне.

Еще одна вещь, которую следует учитывать, - это использование функции для определения вашего шаблона, затем вы можете использовать отдельные шаблоны для редактирования / просмотра, например:
http://www.knockmeout.net/2011/03/quick-tip-dynamically-changing.html

...