I'm working on a mobile page and have a list with about 300 items. This is a total of 300kb data when users access that page. I've implemented a jquery listview as composite component for dynamically show a listview with show more feature and any content:
<cc:interface>
<cc:attribute name="items" />
</cc:interface>
<cc:implementation>
<form class="ui-filterable">
<input id="filterable-input" data-type="search" placeholder="Search track..." />
</form>
<ul id="list" data-role="listview" data-filter="true" data-inset="true" data-input="#filterable-input">
<ui:repeat id="repeater" value="#{cc.attrs.items}" var="item">
<li style="padding: 0 10px">
<cc:insertChildren/>
</li>
</ui:repeat>
</ul>
<input type="button" value="Show more" />
</cc:implementation>
What i want to do, reduce first rendering, let's say to 50 items. If the user then clicks on show more, the next 50 elements should be get from server and rendered without loading the old elements again.
There is a infinit scroll example for jquery: Jquery infinit scrool
But they use only constant expressions for adding elements. In my case, i wanna add cc:insertChildren, where the content doesn't matter and can be choosen dynamically.
In My Bean i have a List with all elements. Another thought was, to use the size attribute of ui:repeat. But to change that, i have to update my ui:repeat component and so all elements are downloaded again. So with easy math the total downloaded size would be for my example 50kb + 100 kb + 150kb + 200kb + ...
Finally i wanna have a solution, where after all of the scrolling the total downloaded size from server is equal to the size, when all items are rendered at start.
