使用淘汰赛显示条件html

Question

我有一系列淘汰赛可观察到的活动，其中包含审计和评论。我从服务器获取了数据，并根据对象的时间戳对活动数组进行了排序。

我希望能够根据类型有条件地显示html，因此审核和注释看起来会有所不同。

<!-- ko foreach: activities -->
<div class="audit" data-bind="visible: {activity is typeof Audit}"> 
    @*Do some audit html*@
</div>
<div class="comment" data-bind="visible: {activity is typeof Comment}"> 
    @*Do some comment html*@
</div>
<!-- /ko -->

我有以下html，但是我不知道条件如何，我只是在上面写了一个占位符，以便您了解我要实现的目标。

我可能正在处理所有错误，非常感谢任何帮助！

Answer 1

如果您将可见绑定更改为 if 绑定，Nayjest 的解决方案应该可以工作 - 这样它就不会尝试渲染具有标题依赖项的部分。

然而，更好的解决方案可能是拥有两个模板并根据类型执行它们。您可以在虚拟机上使用一个方法，该方法接受 $data 并返回“auditTemplate”或“commentTemplate”，具体取决于 $data instanceof Audit 之类的结果。然后，您将使用这些 id 作为脚本标记嵌入两个模板：

<script id="auditTemplate" type="text/html">
<div class="audit">
<!-- Do some audit stuff -->
</div>
</script>

<script id="commentTemplate" type="text/html">
<div class="comment">
<!-- Do some comment stuff -->
</div>
</script>

然后在你的虚拟机中，你会看到类似的内容：

this.getTemplate = function(data) {
return (data instanceof Audit) ? 'auditTemplate' : 'commentTemplate'
}

在你的页面的 html 中你会做类似的事情：

<!-- ko foreach: activities -->
<div databind="template: {name:$parent.getTemplate($data), data: $data}"></div>
<!-- /ko -->