提高淘汰赛的表现？

Question

我有一个包含50个项目的列表，每个项目都有几个这样的块：

<!-- ko if: replyCount() == 1 -->
    <p class="reply-count-label">reply</p>
<!-- /ko -->
<!-- ko if: replyCount() != 1 -->
    <p class="reply-count-label">replies</p>
<!-- /ko -->

这是在虚拟foreach循环中。

即使只有50个元素，页面也需要大约1秒进行渲染，因此用户体验非常糟糕，因为它们在渲染时会移动。这些可观察量没有被更新或任何东西 - 它只是初始加载时间很慢。

我在加载时唯一做的就是map：

 self.posts = ko.mapping.fromJS(model.questions);

我正在寻找优化方法。罪魁祸首是我使用ko.mapping，还是使用虚拟元素，或if + foreach绑定或组合？

Answer 1

绝对值得一试 -

<ul data-bind="foreach: { data: replyCounts, as: 'replyCount' }">
    <li data-bind="replyCount === 1">Show me</li>
</ul>

这样您每次都不必访问该函数来访问该值，因为它已经被解析了。我无法测试这会给你的结果，因为我无法访问小提琴或任何东西来复制问题所以我看不出差异，所以如果这不提供价值那么随便让我知道，我可以删除它。