0

Working with an older ember application (2.18.1). The following problem is repeated too many times to all fix in the time frame I got available right now.

The component is loading it's own data (setting this.get('model')) and all works fine.

However as the database is now a little slower the user sometimes click on one link, where the template render the component and it start loading it's data .

If the user click another link (to a route that does exactly the same) data from both the previous and the "new" component get loaded.

I can't reset the model when data get loaded, since the fetchRecord method that loads the data get called over and over with paging (as the user scroll down).

I'm sure I'm just not thinking of an obvious solution (did not work on Ember for a few years), any advise?

(ps: some of these components does not use paging, in mean time I'm going to clear out the model before setting it to what the api returns)

Nico
  • 139
  • 3
  • 6
  • 23
  • can you share some code? how do you set `this.model`? How do you pass `this.model` to the component? Do you overwrite the model you also pass down? You *must* send something down the component that helpts it to know where it is rendered. Then you can load your data in a computed property depending on that information. – Lux Apr 16 '20 at 23:50
  • 1
    Hi Nico. Stack Overflow is better suited to specific questions around specific code, and your question is very vague and confusing. Specifically what does it mean to be "setting this.get('model')" just as one example. You use the word "paging" but seem to be describing infinite scroll "as the user scrolls down". I hope you can take the time to describe your issues in more clearly and in better detail with example code to get better help. – Gaurav Apr 18 '20 at 01:01

1 Answers1

1

I'm afraid ember-data gives no support to abort a request, but you can handle that yourself directly on your component calling the endpoint through Ajax or fetch, and then pushing the payload or aborting requests using the lifecycle hooks. For example, you can trigger the abort() on the willDestroyElement hook.

import $ from 'jquery';
import Component from '@ember/component';

export default Component.extend({
  init() {
    this._super(...argument);
    const xhr = $.get( "ajax/test.html", (data) => {
      this.get('store').pushPayload(data);
    });
    this.set('xhr', xhr);
  }

  willDestroyElement() {
    this._super(...argument);
    this.get('xhr').abort()
  }
});
Milton Castro
  • 1,557
  • 11
  • 14