How to add a date picker or any common jQuery plugin to an Ember-CLI application

Question

So, I'm trying to add pikaday date picker to an Ember-CLI application.

In my /app/views/calendar-view.js

there is the following:

 import Ember from 'ember'; export default Ember.TextView.extend({ modelChangedValue: function(){ console.log(this.get('value')); }.observes("value"), didInsertElement: function(){ currentYear = (new Date()).getFullYear(); formElement = this.$()[0]; picker = new Pikaday({ field: formElement, yearRange: [1900,currentYear+2] }); this.set("_picker", picker); }, willDestroyElement: function(){ picker = this.get("_picker"); if (picker) { picker.destroy(); } this.set("_picker", null); } }); 

My main problem is how to add the plugin itself in ember-cli?

This is the github link for pikaday: https://github.com/dbushell/Pikaday

In particular, I think this part may be important, since Ember-CLI uses AMD: https://github.com/dbushell/Pikaday#amd-support

So, how do I add the plugin itself in ember-cli?

Answer 1

Update

After writing this answer, the Ember Addon API has become more user-friendly and is ideal if you are creating an Ember / mixin / other component that adds js to the regular plugin.

Regular installation

In a “normal installation” situation, you want the plugin to be available through your application and be included in the application payload no matter what. To do this, add the file / package to the vendor project directory. Two instantly available methods are available for this: Bower or simply save the file or package in a directory.

1) Bauer

Use Bower to install the package either through the terminal, for example:

 bower install ember-validations 

Or if bower.json doesn’t have the Bower easy-install package available,

 { "name": "app", "dependencies": { "chosen": "https://github.com/harvesthq/chosen/releases/download/v1.1.0/chosen_v1.1.0.zip" } } 

2) Write a file

You do not need to use Bower to add files and directories to the vendor directory. You can create a file anywhere in the vendor directory, copy and paste the javascript plugin into it and save it, and it will still be available for import into your application.

3) Make it available in your application

Regardless of the method by which you create and save plugin scripts, you still have to import the file directly into your application. You do this in Brocfile.js . Add import with the path to the file (the main file, if installed in the package), before module.exports = app.toTree(); .

 app.import('vendor/ember-validations/index.js'); app.import('vendor/chosen/chosen.jquery.min.js'); 

There is more information in the Dependency Management section of ember-cli docs .

Polyfill or other non-essential plugins

There is some situation when you do not want to always load / run a script in your application. For example, you load a large polyfill only when the user uses IE. In this situation, you can create a directory in public/assets to store javascript files and load them using the jQuery $.getScript() method in the initializer or somewhere else in your Ember application.

I answered a similar question about such a scenario here .