So I am trying to add pikaday
date picker to Ember-CLI app.
I've got the following in my /app/views/calendar-view.js
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 issue is how to add the plugin itself into ember-cli?
This is the github link for pikaday: https://github.com/dbushell/Pikaday
More specifically I think this part might be important since Ember-CLI uses AMD: https://github.com/dbushell/Pikaday#amd-support
So how do I add the plugin itself to ember-cli?
Update
Since writing this answer, the Ember Addon API has become more usable and are a perfect option if you're building an Ember component/mixin/other class that adds to the regular js plugin.
In a 'regular install' situation, you want the plugin to be available through your app and be included in the app's payload no matter what. To do this, add the file/package to your project's vendor
directory. There are two immediately available ways to do this: use Bower or simply save a file or package in the directory.
1) Bower
Use Bower to install the package either through the terminal, like:
bower install ember-validations
Or, if there is no easy-install Bower package available, in your bower.json file:
{
"name": "app",
"dependencies": {
"chosen": "https://github.com/harvesthq/chosen/releases/download/v1.1.0/chosen_v1.1.0.zip"
}
}
2) Writing a file
You don't have to use Bower to add files and directories to your vendor
directory. You could create a file anywhere inside the vendor
directory, copy and paste the plugins javascript into it and save it, and it will still be available to import into your app.
3) Making it available in your app
Regardless of the method through which you create and save the plugin scripts, you have to still have to import the file directly into your app. You do this in Brocfile.js
. Add an import with the path to the file (main file if it's a bower installed package) just before module.exports = app.toTree();
.
app.import('vendor/ember-validations/index.js');
app.import('vendor/chosen/chosen.jquery.min.js');
There's more info in the Managing Dependencies section of the ember-cli docs.
There are some situation in which you don't want to always load/run a script in your app. For example, you are loading a large polyfill only when the user is using IE. In this situation, you can create a directory in public/assets
to hold the javascript files and load them using jQuery's $.getScript()
method in an initializer or somewhere else within your Ember app.
I answered a similar question about that kind of scenario here.
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