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();
};
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].
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.
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'});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With