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的解决方案应该有效 - 这样就不会尝试渲染具有标题依赖性的部分。

然而，更好的解决方案可能是拥有两个模板并根据类型执行它们。您可以在VM上有一个获取$ 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 -->

Answer 2

如果您有在审核模型的全局范围和属性“活动”中可见的类审核，请尝试以下操作：

<div data-bind="foreach: activities">
   <div data-bind="visible: $data instanceof Audit">
       <h1 data-bind="text: $data.title"></h1>
       <!-- Some other data here -->
   </div>
</div>

使用Knockout显示条件html

2 个答案: