使用 Knockout 显示条件 html

Posted 2023-03-03

【中文标题】使用 Knockout 显示条件 html

【英文标题】：Displaying conditional html with Knockout

【发布时间】：2012-06-16 14:51:29

【问题描述】：

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

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

<!-- 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，但我不知道条件如何，我只是在上面写了一些东西作为占位符，以便您了解我想要实现的目标。

我可能完全错了，非常感谢任何帮助！

【问题讨论】：

我认为data-bind="visible: activity.hasOwnProperty(<SOME UNIQUE FOR AUDIT PPOPERTY NAME HERE>)" 会起作用，但您能否提供一个 JS fiddle 进行测试？

我以前从未使用过 js fiddle，但我会尝试使用它，然后添加为编辑。

【参考方案1】：

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

<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>

【讨论】：

嗨，这很好用，但不幸的是它仍然解析内部元素。因此，如果它是一条评论，它仍然会尝试运行 $data.title 但由于评论没有标题属性而失败。我被引导使用模板。

也许考虑使用 if 绑定而不是可见绑定：knockoutjs.com/documentation/if-binding.html - 这样，在条件为真之前不会应用内部绑定。

【参考方案2】：

如果您将可见绑定更改为 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 -->