0

I have this code in a route:

import Ember from 'ember';

export default Ember.Route.extend({
  isEditing: true,

  beforeModel: function() {
      return Ember.$.getScript('//api.filestackapi.com/filestack.js');
  }
});

But is this the correct way, will it download this file every time a user transitions to this route?

I tried this solution, but in that run loop the DOM is already rendered, but I need this file to render the page, so that does not work. I also tried to remove the Run loop call, but it seems to no longer work in Ember 2.7 (I got a deprecated warning and the app just failed to load anything!).

Community
  • 1
  • 1
rmcsharry
  • 5,363
  • 6
  • 65
  • 108
  • Yes, beforeModel will be fired every time before transtition to route. What is that script? Why do you want to download it? – Gennady Dogaev Sep 12 '16 at 19:21
  • It's a JQuery plugin needed for that page, and only that page. – rmcsharry Sep 13 '16 at 06:42
  • In this case consider using ember-cli-build and creating a component – Gennady Dogaev Sep 13 '16 at 07:43
  • I already have a component, which is loaded when this route resolves. But I couldn't figure out how to load the file in the component itself, so that's why I loaded it in the route ... hence my question :) – rmcsharry Sep 13 '16 at 08:06
  • Download file into vendor directory and then add app.import('vendor/file_name.js'); to your ember-cli-build.js [Details](https://ember-cli.com/user-guide/#managing-dependencies) – Gennady Dogaev Sep 13 '16 at 09:43
  • Thanks but that will load the file for the entire app. I only need it for one page, so I want to 'lazy' load it just for the one page it is needed on. Also, so I'd rather load it directly from their api service rather than download it to vendor dir (since sometimes they will make changes to that file and I'd rather always load the most recent version automatically) – rmcsharry Sep 13 '16 at 09:46

1 Answers1

1

Yes. Your approach is right. thats what described in guides too for beforeModel hook.

You can return a promise from this hook to pause the transition until the promise resolves (or rejects). This could be useful, for instance, for retrieving async code from the server that is required to enter a route.

http://emberjs.com/api/classes/Ember.Route.html#method_beforeModel

Ember Freak
  • 12,918
  • 4
  • 24
  • 54
  • Thank you! Now I am let wondering if it will download the file every single time for that user, or whether Ember will automatically cache it locally. – rmcsharry Sep 16 '16 at 14:24
  • Every time transitioning to route through `beforeModel` hook will download this file, ember will not cache it. AFAIK... and if you are transitioning to route with providing model then as you know it will skip beforeModel hook so it wont download. (for more information regards triggering beforeModel hook [refer](https://guides.emberjs.com/v2.8.0/routing/specifying-a-routes-model/) – Ember Freak Sep 16 '16 at 14:36
  • 1
    jquery ajax - `cache:true` might work for you refer [this answer](http://stackoverflow.com/questions/12884097/jquery-getscript-caching) – Ember Freak Sep 16 '16 at 14:50