6

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();
};

2 Answers 2

5

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.

4
  • this.$() should be a valid selector for the current component. Just curious - why schedule that into afterRender? Doesn't didInsertElement get called after the component is rendered already? Commented Nov 9, 2015 at 0:37
  • 1
    @PatchRickWalsh, it looks like as per the docs that you could use either in this case and that "didRender runs after didInsertElement (it also runs on subsequent re-renders)." so I guess it depends on the use case. emberjs.com/blog/2015/06/12/ember-1-13-0-released.html
    – Tina
    Commented Nov 9, 2015 at 1:04
  • The link to [this blog post][1[ didn't make it into this post properly. You may want to amend that @tina. I'd like to see what that was. Commented Nov 11, 2016 at 4:15
  • Here is a twiddle with a working jQuery plugin in a component as an example: ember-twiddle.com/4c464007f11b1eec3313bbc29cf2f30e : ) Commented Nov 11, 2016 at 4:16
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'});

3
  • yes I have restarted the ember server several times.
    – ipatch
    Commented Nov 9, 2015 at 0:27
  • Is there maybe an error with vender/bubbles where it's not attaching itself to $ correctly? Is that a module you've written yourself? Commented Nov 9, 2015 at 0:31
  • Sometimes I grab a CDN of something and later realize that it's a fork of the jQuery plugin that is now vanilla JS. Watch out for that. Commented Nov 11, 2016 at 4:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.