KnockoutJS性能:仅渲染当前在视图中的元素(清除/销毁其他元素)

问题描述 投票:2回答:1

[我正在使用KnockoutJS开发一个应用程序,该应用程序打算以长的可滚动列表显示页面/幻灯片。

这些页面中的每个页面都有一些所见即所得的高级功能以及大量其他工具和数据。

但是,随着页面/幻灯片数量的增加,我注意到性能上的巨大飞跃。

因此,我想更改为仅渲染视口中的幻灯片/页面的方式。滚动到某个项目之后,我希望KnockoutJS销毁之前渲染的任何内容,而是渲染进入视口的所有内容。应使用占位符li-tag替换被破坏的项目(直到您滚动回到它们为止)。

到目前为止有效”

到目前为止,我已经整理了一个JSFiddle,它很好地显示了如何仅将“可见”项的可观察“ inView”设置为true。看一下演示,它向您展示了视图模型如何响应滚动:https://jsfiddle.net/1xxy6q83/

缺少的内容

但是,问题是要使条件显示正常工作。每当我尝试混合/匹配foreachif时,它将停止工作。我要寻找的是淘汰赛仅呈现在视口中看到的内容。当某项移出视图时,Knockout应该将其清理,删除所有事件,并呈现一个非常简单的占位符li-tag,以确保列表不会出现。

我正在使用KnockoutJS开发一个应用程序,该应用程序旨在以长的可滚动列表显示页面/幻灯片。这些页面中的每一个都有一些高级的WYSIWYG功能以及大量其他...

performance knockout.js viewport knockout-3.0
1个回答
6
投票

您可以使用template绑定,其中模板名称基于inView的值:

© www.soinside.com 2019 - 2024. All rights reserved.