Cache data and remember list position using collection-repeat when displaying detail view


#1

Hi,

I’m trying to get a collection-repeat list view working. So far it looks very good, but what I noticed is that as soon as I enter the detail view of an item and then go back, the list reloads and is being rendered again from scratch. I use a REST service as data provider and test data (5000 items).

I guess I have 2 questions:

a) Is there a simple way to cache the data locally to avoid reloading this huge dataset on each detail view -> back?
b) While loading the detail view of an item, how can I save the list position? There is something similar for normal list views (ion-list), but I can’t find anything for collection-repeat.

Thanks!


#2

do you have a sample you can put in codepen?


#3

a) If you are using a service/factory to fetch the data, just store it in a local variable in the service. The next time the controllers requests it, see if the var is not null and return the “cached” data.

b) See the “rememberScrollPosition(id)” section of the docs : http://ionicframework.com/docs/api/service/$ionicScrollDelegate/


#4

@calendee Thanks, I managed to get a cache mechanism working using $cacheFactory. Works smooth so far. I had a look at other caching solutions mentioned around in the forum (like angular-cache), but I prefer the less complex version for now. :slight_smile:

However, the rememberScrollPosition(id) doesn’t work. If you look at the documentation for collection-repeat and ion-scroll for example, they use different markup and aren’t part of the same “family”. collection-repeat seems to be part of the ion-list handling while ion-scroll is something else completely.

The example for collection-repeat doesn’t use an ion-scroll element, but relies on ion-content and a couple of divs. So I can’t attach a delegate-handle attribute to an ion-scroll element. I tried by trial and error: wrapping with ion-scroll, attaching delegate-handle to every possible node (just for fun), but the controller can’t find it:

Delegate for handle “longListScroll” could not find a corresponding element with delegate-handle=“longListScroll”! scrollToRememberedPosition() was not called!
Possible cause: If you are calling scrollToRememberedPosition() immediately, and your element with delegate-handle=“longListScroll” is a child of your controller, then your element may not be compiled yet. Put a $timeout around your call to scrollToRememberedPosition() and try again.
controllers.js:45

if my logic doesn’t completely fail, I think that $ionicScrollDelegate simply doesn’t apply to collection-repeat?

Or do I miss something very obvious?


#5

M’right …

I just noticed that the list position of collection-repeat is in fact being saved automagically. I rolled back my example code and started from scratch. Now my test works. It could be that I messed up the example snippet in the docs… Noob.

Never mind. :blush:


#6

Hello
Could you post a sample? i cannot get the collection repeat save the scrolling position when going back from a detail view …


#7

I started off with the example project provided by Ionic. I suggest you have a look at this first. And make sure you update Ionic to the latest version.


#8