I am currently working with Ember.js.

I have some issues importing some library into my application. First I downloaded this library .js after that I was reading all the documentation in this Importing Javascript. But my main problem is I still don't know how to use it. I was searching and after long hours I found that in the application.hbs in the template that you generate with ember g template application that is in the folder ~\app\templates I have to make a call with this action:

{{outlet}}
{{link-to nameoftheLibrary}}

But I am still not much familiar with this. I can't call any action from the library that I am trying to use.

I am currently working with Ember.js.

I have some issues importing some library into my application. First I downloaded this library http://www.acme./javascript/Clusterer2.js after that I was reading all the documentation in this Importing Javascript. But my main problem is I still don't know how to use it. I was searching and after long hours I found that in the application.hbs in the template that you generate with ember g template application that is in the folder ~\app\templates I have to make a call with this action:

{{outlet}}
{{link-to nameoftheLibrary}}

But I am still not much familiar with this. I can't call any action from the library that I am trying to use.

• javascript
• ember.js
• web-applications
• import

• save Clusterer2.js file into vendor folder. and in ember-cli-build.js file include the below line app.import('vendor/Clusterer2.js')..and then you can start using like var clusterer = new Clusterer( map ) – Ember Freak Commented Aug 12, 2016 at 14:12

1 Answer 1

First Preference: Ember Addon

Preferably your JavaScript library will be an ember add-on. Then you can install it by simply typing:

# ember install <addon name>

This will usually take care of all importing that you need to do. The JavaScript code will be included in your piled Ember app.

Second Preference: bower package

If there isn't an ember add-on, then you can use bower:

# bower install -S <bower package name>

Then you need to add the dependency in your .ember-cli-build file:

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

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
      // snipped out some stuff
      });

  // this library is in your bower_ponents/somelibrary/somelibrary.js file
  app.import(app.bowerDirectory + '/somelibrary/somelibrary.js');

  return app.toTree();
};

Last Preference: Manual import

If you can't find your required library as an ember add-on or bower package, you're going to have to import the library manually.

Step 1: save the javascript folder in your vendor folder

Save your Clustererer2.js file in a folder like vendor/clusterer/clusterer2.js.

Step 2: Modify your .ember-cli-build file to include this in your piled Ember app

Modify your file like this:

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

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
      // snipped out some stuff
      });

  app.import('vendor/clusterer/clusterer2.js');

  return app.toTree();
};

Step 3: Make JSHint happy about the new Global

You're going to have to make jshint happy about the new global variable you're going to reference in your code. Add it in your .jshintrc file:

{
  "predef": [
    "document",
    "window",
    "-Promise",
    "Clusterer"
  ],
  "browser": true,
  "boss": true,
  // snipped a lot of stuff
  "esnext": true,
  "unused": true
}

Notice that after the "-Promise" entry I added the Clusterer line?

Step 4: Rebuild Ember app and use your new library

Now that you've included the javascript file in your piled output, you should be able to reference it in your code.