mvvm - 通用表单域的咨询/编辑模板

Question

在我的淘汰赛表格中，我有很多这样的重复代码：

<div data-bind="if:Id == 0">
My form field : <input type="text" name="MyFormField" data-bind="value:MyFormField />
</div>
<div data-bind="if:Id != 0">
My form field consultable : <span data-bind="text:MyFormField"></span>
</div>

如您所见，如果 Id = 0，我会显示一个输入，如果只是为了咨询，我会显示一个简单的跨度。

是否可以制作一个通用模板？这个想法是：

1. 调用模板并引用我要显示的属性
2. 如果 Id == 0，模板呈现一个输入，相反，模板呈现一个跨度

提前谢谢！

Answer 1

查看文档的注释 5 ，您可以动态选择要用于部分的模板。在你的情况下，它会是这样的：

<ul data-bind='template: { name: templateName }'> </ul>

然后将计算属性添加到您的视图模型：

templateName = ko.computed(function()
{
    return Id() === 0 ? 'inputTemplate' : 'spanTemplate';
});

然后将两个模板命名为与计算中的两个命名选项相同：

<script type="text/html" id="inputTemplate">
    <input type="text" data-bind="text: name" />
</script>

<script type="text/html" id="spanTemplate">
    <span data-bind="text: name" />
</script>