I'm building an "app" (more of a website, but anyway), which has a list of posts (a Marionettte.CompositeView populated with Marionette.ItemViews. Below those posts is a "Load more" button, which triggers a pagination-route (/posts/P:offset, so /posts/P10 for example). When clicked, It's easy enough to load /api/posts/P10, add those to the collection and have them appended, that's a piece of cake. What I can't get my head around, is when someone lands on the url /posts/P10 cold, how do I make that page show the first 10 posts, plus the extra ones that should be triggered by the pagination-segment?
currentPage property of your Paginator stores the most recent page number. If it's not 9 - you have to load all 10 pages. And you can do it by changing perPage property -
this.perPage = this.perPage * pageNumberYouWant // 10
Then revert perPage value to original one after the request.
You could make your life easier by making the url more generic /posts/P:offset?count=count and have your server set the default count to 10.
So:
/posts/P0 will show you Items from 0 to 10
/posts/P0?count=20 will show you Items from 0 to 20
/posts/P10 will show you Items from 10 to 20
Related
i am looking at Instagram react elements using chrome devtools.
i have observed that one parent div(big parent) maintains height of all the articles i have scrolled through so far.inside this parent there is one more div(flex parent) which is a flex column with only 8 children(articles). the padding top and padding bottom are calculated for flex parent as,
big parent height = flex parent's top-padding + flex parent height + flex parent' bottom-padding.
my question here is why limit flex column to have only 8 items. why can't we add every new article to fex column and get rid of padding-top padding-bottom logic for felx column.
are we gaining some performace by maitaining only 8 items of newsfeed in flex parent ?
I don't have Instagram, but I know twitter has an infinite scroll. So you are asking the wrong question here. Since they have more than a million users each day they don't want to load 100 posts when you are not even gonna look at them. say you have 10.000 users and all of them opens the twitter page. If everybody would have 100 posts loaded that would be 10.000 x 100 = 1.000.000 posts shown
Say that none of the users want to see any post, but they want to change their profile. That is 1.000.000 posts shown for nothing. So instead of showing 1.000.000 post, they choose to show 8 posts instead. that is 10.000 x 8 = 80.000 posts shown for nothing. If you want to see more posts you start scrolling and it will load more posts. So this is why they are showing 8 posts instead of all of them. They don't want the server to do unnecessary requests. that is how you should think
In my system, items (they are like blog posts), are published often.
In the main page I list 20 items, and there is a Load More button at the bottom, which will take the next 20 items. If I wait a while, there will be new blog posts in elastic, so If I click Load More, it will take the 20 items from 20 to 40, but there are new ones so it returns some items repeated.
The question is: how could I part from the last item published to paginate and get the next 20 items from that one? Like ignoring there are new items
I thought about making a query first to get the position (if there is a way to know the position of a specific item in a query) but it would be making the query twice.
I found the solution for this kind of cursor based pagination in elasticsearch:
https://www.elastic.co/guide/en/elasticsearch/reference/current/search-request-search-after.html
[EDIT]
This is what in the end worked for me
https://www.elastic.co/guide/en/elasticsearch/reference/current/search-request-scroll.html
I am implementing an activity feed similar to facebook or twitter's. I fetch newsfeed items in batches of x(I use RelayJS, x is the pagesize of connections). However, it may so happen that due to eager loading in the List View a lot of items are fetched for the news feed but the user doesn't scroll to the end to view them. How can I determine what news feed items a user has really seen so that I don't repeat them and only show the newer ones and the ones down below that were fetched but not shown to the user when he refreshes or opens the app next time? The easier solution is to discard all the x items that had been fetched as seen.
How is this info stored? A table of numUsers X numItems with booleans? A set of such items?
It depends a lot on your implementation. The most simple one would be return to the user only the information generated after their last login.
Now, if you want to actually keep track of the information that was actually seen by the user then I guess that is a lot more complex. Like storing every item ID and a flag to check if the user has seen it.
Then you can make a clean up on app close that will mark that very first item that you need to show them that they haven't seen. For example:
1 Not Seen
2 Not Seen
3 Seen
4 Not Seen
5 Not Seen
6 Seen
7 Seen
8 Seen
9 Seen
Upon closing the app, you store that you need to show them starting on the ID 5.
I have a standard Master > Details page in AngularJS setup using RouteProvider.
The Master page has a variation of "infinite scrolling" where Data can be added AND removed at both ends. Say, the user is looking at Contacts list, and has scrolled to 312th entry of the Contact List, only Contacts numbered 200-400 are kept, and the entries 1-200 are removed from Scope. Of course, when the user scrolls DOWN beyond 360, the list is appended with 401-500. And if the scrolls UP above 240, the list is "pre-pended" with 100-199.
Now, the user can click on a particular Contact and go to the Details page. Upon pressing 'Back' (window.history.back) how do I make the Master page re-render with,
Exact list 200-400 as it was when the page was left
Scrolled exactly to the position 312
(IMPORTANT) Listeners still listening correctly for scroll events beyond 360 or above 240?
Is this even possible? And if yes, please help me with how.
I'm not going to write code for this, it's a bit difficult without a deeper understanding of how your infinite scroll works but will offer some ideas
The first thing you would need would be to store the view state in a service and for more robust persistence ( page reloads or return visits) in localStorage synchronized with the service.
The main start point for the view state would be a start index so you know what to filter in your data array ... and either a length value that may or may not be constant in your app or an end index.
As for the scrolling you could use a scroll event handler in a directive to update the service object with offset scrollTop value in order to set on subsequent visit.... angular.element(containerElement)[0].scrollTop = service.scrollTop as a loose example
There is also $anchorScroll service that you could use by setting ID on each item
This won't give you a full solution but hopefully can get you started
Note that you will need to account for time it takes to render ng-repeat by defering to next digest cycle before trying to set scrollTop if you use that
I have the paginator working perfect with my view to generate a page view for items. However when you are on let's say page [8] and you visit on of the items and return to the list view the paginator start from page 1 instead of returning to the last page[8]
I have searched high and low in how to get this fixed but no result, am I doing something wrong? Is there an easy fix/solution?
Nothing is wrong, this is the expected behaviour. Cake won't try to remember what page you were up to.
There is an easy solution - just store the last accessed page number in the session, and then you can get it again when needed.
The Pagination Recall Component should do what you want.