How to load external JS file in component using ember-cli

Question

I have created an ember app with a component , and I am trying to figure out how I can load a external JS file that is stored in the vendor dir of the app within the component. The code for the component looks like the following,

// app/components/bubbles-page.js

import Ember from 'ember';

export default Ember.Component.extend({

    didInsertElement: function() {
    // this.$() is a scoped selector to the current view

    // bubbles();



    // window.onload = bubbles();

    // the below line gives the following error,
    this.$().bubbles();
    // ERROR
    //TypeError: this.$(...).bubbles is not a function
    // END ERROR
  }

});

And the ember-cli-build.js looks like the following,

/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    // Add options here

    // 
  });

  // Use `app.import` to add additional libraries to the generated
  // output files.
  //
  // If you need to use different assets in different
  // environments, specify an object as the first parameter. That
  // object's keys should be the environment name and the values
  // should be the asset to use in that environment.
  //
  // If the library that you are including contains AMD or ES6
  // modules that you would like to import into your application
  // please specify an object with the list of modules as keys
  // along with the exports of each module as its value.
  app.import( app.bowerDirectory + '/d3/d3.min.js');
  app.import('vendor/bubbles.js');

  return app.toTree();
};

Answer 1

Your ember-cli-build.js seems ok.

As for your component file, you can use Ember.run.scheduleOnce('afterRender', callback) to wait for the DOM to render and then call your jQuery plugin.

Also, normally with jQuery plugins, you would have to pass a jQuery selector with which to call the function.

Try the following:

// app/components/bubbles-page.js
import Ember from 'ember';

export default Ember.Component.extend({

    didRender() {
        this.$('.my-bubbles-container').bubbles();
    }

});

Replace .my-bubbles-container with your jQuery selector. I am not familiar with the jQuery plugin you're trying to use but normally that's how jQuery plugins would be used.

You can read more about how to initialize a jQuery component on [this blog post][1].

Updated answer

After learning that your bubbles.js file wasn't a jQuery plugin and that it was a function that operates on the global window, you can call it like this:

// app/components/bubbles-page.js
import Ember from 'ember';

export default Ember.Component.extend({

    didRender() {
        bubbles();
    }

});

If your function is a global function, you will need to add /* global bubbles */ to your component file, or add bubbles to the predef array in the .jshintrc file to avoid the JSHint errors.

Answer 2

This might be a silly question but did you restart your ember serve after adding the import to ember-cli-build ? Changes to the Brocfile or ember-cli-build won't be picked up until you restart.

Another thing you could try is to add { type: 'vendor'} to your import statement: app.import('vendor/bubbles.js', {type: 'vendor'});