在模板中对$ data进行双向绑定

Question

我正在尝试设置通用的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在模板中的伪变量没有双向绑定.它将反映observable中的当前值,但输入控件的更改不会设置该值.

我怎样才能获得双向绑定$data？

另见这个jsfiddle

Answer 1

最简单的选择是将对象传递给模板绑定,允许您访问实际的observable,如:

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

然后,在模板中绑定"field"而不是"$ data".

要考虑的另一件事是使用函数来确定您的模板,然后您可以使用单独的模板进行编辑/查看,如:http:
//www.knockmeout.net/2011/03/quick-tip-dynamically-changing.html