【发布时间】:2014-09-23 09:43:49
【问题描述】:
假设有一个网页位于/items,列出了所有可用的项目。
当用户点击一项时,浏览器会显示/items/:itemId并显示该项的详细信息。
当然,项目列表可能非常大。
这就是我使用scroll infinite feature from Ionic(我使用的基于Angular 的框架)的原因。
但是,正如许多开发人员所知,处理从 /items/:itemId 到 /items 的“后退按钮”很棘手,因为 Angular 的控制器在页面转换期间被销毁,然后在再次加载列表页面时重新构建。
因此在单击项目的详细信息之前会丢失滚动位置和已加载的确切项目。
我想到了一些解决方案,但我犹豫了,因为都有一个“缺点”:
在项目详细信息即将显示之前将实际加载的项目(完整项目)存储在
$cacheFactory(Angular 的缓存或本地存储)中。
因此,当按下后退按钮时(在详细信息页面上),/items的控制器可以从缓存中初始化数据,并且可以轻松地“记住”滚动位置。
缺点是缓存中的数据可能是陈旧的......“无需在缓存中存储任何加载的项目!”只需将实际加载的块数存储在缓存或本地存储中即可。
例如,我的 REST API 允许逐个检索 10 个项目。
如果用户加载到第二个块(最多 20 个元素),缓存中的变量将包含此值,然后控制器可以初始化所有 20 个项目。
缺点是它会涉及对服务器的多个请求。事实上,如果用户加载了 30 个块,控制器将需要对服务器进行 30 次调用...... 我可以自定义服务器处理的块的大小,但是一项很重(几个长文本等。任何东西的列表),这解释了为什么我限制在一个相对较小的数字。使用双向滚动(顶部和底部),这样 DOM 中总是有 10 个项目。我只需要存储已加载的最后一个块数,以便重新加载它。
缺点:我必须自己编写指令(可能是这样),因为目前没有 Angular(也不是 Ionic)指令。
而且我认为双向仅在处理非常非常大的列表时才有用:超过 2000 行,以减轻 DOM。
在我的大多数情况下,我预计不会超过 400 行...
什么是好的做法?也许另一种解决方案?
【问题讨论】:
标签: javascript angularjs web-applications scroll ionic-framework