HI,
I have a listing with an infinite scroll. Each list item has a tap event which opens a slide down below the list with more information.
I really like the construct of calling a listitem template in the list iterator, like this (JADE format)
div.list
+each episodes
+feedListItem
This creates a template for each list item with the benefit that the tap event within the list item has access to the THIS scope (which is the whole mongo document of the current iteration).
So this way I dont have to put anything in the markup to transfer data, for example an ID or an URL or anything.
( I picked this up from the meteor tutorial).
There is only one problem, when I start scrolling on an ipad and have for example 50 list results, having so many list item template instances is really slowing down the mobile browser. When I tap on a list item it sometimes takes 2-3 seconds for any response. All very laggy.
I was a bit worried, cause mobile has to work in my solution. So I gave the issue some thought and figured there are currently a lot of models created with observers and so.
So I ditched the listitem template and just added the markup directly in the EACH block. Now speeds are blazing on mobile, even with 300 results!
But I lost the elegant THIS scope benefit and now have to add data in my markup for the events to pickup.
Is there anyway to use the list item template without having the performance issue, or is that just an inevitably?
Cheers