How to import a library on Ember.js?

Question

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.com/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.

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 compiled 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_components/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 compiled 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 compiled output, you should be able to reference it in your code.