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

我正在尝试设置通用的 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”示例一样在字段级别使用模板，而不是显式元素/控件。这使得整个表单可以在编辑和阅读模式之间轻松切换，而无需大段大部分重复的标记。这还允许重用常见数据类型编辑/显示标记，例如对日期字段使用日期选择器等。

问题
The $data模板内的伪变量没有双向绑定。它将反映可观察值中的当前值，但输入控件的更改不会设置该值。

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

也可以看看这个jsfiddle http://jsfiddle.net/x7kR2/4/

最简单的选择是将一个对象传递给模板绑定，该模板绑定允许您访问实际的可观察对象，例如：

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

然后，在模板中绑定“field”而不是“$data”。

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