在模板内对 $data 进行两种方式绑定答案

【问题标题】：Getting two way binding on $data inside a template在模板内对 $data 进行两种方式绑定
【发布时间】：2012-01-24 15:32:52
【问题描述】：

我正在尝试设置可以根据数据类型在编辑和只读模式之间切换的通用 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 上进行双向绑定？

另见this jsfiddle

【问题讨论】：

标签： knockout.js knockout-templating

【解决方案1】：

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

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

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

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

【讨论】：

一个问题，也许有人知道为什么当我使用 $data 和 $item 关键字时 - 模板未呈现，但是当访问通过 ViewModel 字段名称传入 foreach 的元素时 - 一切正常，例如，我将 viewModel 与用户数组绑定（使用单个 name 字段），然后绑定到模板中的 name 工作，但是当使用 $data 或 $item 时 - 无法使其正常工作。例如<span data-bind="text: $data"></span> 不起作用但<span data-bind="text: name"></span> 很好，所以我无法访问$root, $item, $data 什么可能导致这样的问题？谢谢
也许您可以在 jsFiddle 中创建您的问题？ $item 仅在 jQuery 模板中可用。如果$data 是一个对象，那么您不希望将其传递给文本绑定，而是希望执行text: name 或text: $data.name（第二种语法确实有助于未定义）。