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，我会显示一个输入，或者只是为了咨询而显示一个简单的范围。

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

使用对我想要显示的属性的引用来调用模板
如果Id == 0，则模板呈现输入，而模板呈现跨度

提前感谢！

Answer 1

查看documentation的注释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>

用于咨询/编辑通用表单字段的模板

1 个答案: