Suggestions on how to deal with this model constantly being re-initialized in a set interval?

Question

I have been recently assigned to maintain EmberJS code at work and I am complete newbie with EmberJS or Javascript, Hence, I came here for help.

Context

I have a live feed page (like a news feed) that is integrated with Infinity Loading and this feed constantly checks with the backend to see for any new messages. This is causing this code to be constantly invoked.

import InfinityRoute from "ember-infinity/mixins/route";

export default Ember.Route.extend(InfinityRoute,{
  perPageParam: "perPage",
  totalPagesParam: "meta.totalPages",
  queryParams: { dateFrom:.... },
  model(params){
    const defaultParams = { perPage: 25, startingPage: 1 } ;
    const modelParams = Ember.$.extend(defaultParams, params);
      return this.infinityModel("message", modelParams);
  }

The above code will load 25 pages with startingPage as 1 and pass it to the infinityModel which will contact the data store to get the necessary information.

Question Scenario

Above code is constantly bringing you back to page 1 and lose track of the current page (Example, If you scroll above 25 messages and are in the 2nd page, then the 2nd page keeps disappearing and re-appearing because of the scroll position and model re-initialization setting the startingPage back to 1)

I would love if you guys can provide me with any suggestions on how to handle this model re-initialization and infinityScroll issue?

Answer 1

I'm not sure if I understand your problem correctly but likely we had to solve similar problem. Our backend periodically rewrites model that is used to generate recursive components. These components have some state information that was loose after each model reload. We had decided to solve this using Ember.ArrayProxy.

You want to record 'live-array' where changes will be sent to templates, like when you are using store.findAll() - on other side store.peekAll() returns standard array.