Ember JS：延迟加载模型数据

Question

我正在尝试渲染余数更多的余烬模型数据1000 records。完成渲染部分将需要2分钟以上的时间。

因此，我有一个计划来对其进行优化。我想100 records在第一次加载第一次。一旦他们走到尽头，那么我需要加载第二个100 records。

我怎样才能做到这一点？

Answer 1

检索数据页

概念是分页，并且取决于您的后端如何处理分页。但是在一般情况下，类似：

let result = this.store.query('post', {
  limit: 10,
  offset: 0
});

once processed by the backend would result in a query to a relational database like:

SELECT * FROM post LIMIT 10 OFFSET 0;

So, you will need to keep track of the current page you are showing. Each time you want to fetch a new page, you will simply increment your offset by page * limit where page is the current page index. So the next query when page = 1 would be:

let result = this.store.query('post', {
  limit: 10,
  offset: 10 // 1 * 10
});

It's probably a good idea for you backend to return the total result count, which you can access via some kind metadata key on your JSON responses (or however you want since it depends on the way your backend speaks collections). This way you know when to stop trying to fetch the next page.

UX around retrieval

You will need to choose whether you want to do simple paging, which supplies a next and previous button that the user clicks on to retrieve the next / previous page. Probably best UX to manage the page with query params so that the forward/back buttons in the browser move pages and refreshing does not lose the page. You should also disable / enable the previous and next buttons when there are no pages to fetch in either direction.

Pros

• easy to develop
• user never loses their place
• since only ever showing one page at a time, no memory / performance concerns

Cons

• users have to click buttons and may choose not to / not realize how

Addons

• ember-cli-pagination

The alternative would be using infinite scrolling (a la Facebook news feed). You must pay attention to the scrolling position to know when to fetch the next view (which requires math around the sizes of the current items). Alternatively, you evaluate whether item n - 2 or something like that is in the view port and then prefetch the next page.

Pros

• users never think about paging and continue seeing new content with ease

Cons

• horrible for returning to ones spot on page change / refresh
• horrible for searching
• requires a great deal of attention to the amount of data you are showing or else you will run into overconsumption of memory and performance degradation.
• more difficult to write since you must handle scrolling events, view port detection, etc

addons

• ember-in-viewport
• vertical-collection
• ember-infinity