如何将日期选择器或任何通用 jQuery 插件添加到 Ember-CLI 应用程序 [英] How to add date picker or any general jQuery plugin to Ember-CLI App
问题描述
所以我想将 pikaday 日期选择器添加到 Ember-CLI 应用程序.
So I am trying to add pikaday date picker to Ember-CLI app.
我的 /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);
}
});
我的主要问题是如何将插件本身添加到 ember-cli 中?
My main issue is how to add the plugin itself into ember-cli?
这是 pikaday 的 github 链接:https://github.com/dbushell/Pikaday
This is the github link for pikaday: https://github.com/dbushell/Pikaday
更具体地说，我认为这部分可能很重要，因为 Ember-CLI 使用 AMD:https://github.com/dbushell/Pikaday#amd-support
More specifically I think this part might be important since Ember-CLI uses AMD: https://github.com/dbushell/Pikaday#amd-support
那么如何将插件本身添加到 ember-cli 中?
So how do I add the plugin itself to ember-cli?
推荐答案
更新
自从写下这个答案后，Ember Addon API 变得更加可用，如果您正在构建一个添加到常规 js 插件的 Ember 组件/mixin/其他类，它是一个完美的选择.
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.
在常规安装"情况下，您希望插件通过您的应用程序可用，并且无论如何都包含在应用程序的有效负载中.为此，请将文件/包添加到项目的 vendor 目录中.有两种立即可用的方法来执行此操作:使用 Bower 或简单地将文件或包保存在目录中.
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
或者，如果没有易于安装的 Bower 软件包，请在您的 bower.json 文件中:
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) 写文件
您不必使用 Bower 将文件和目录添加到您的 vendor 目录.您可以在 vendor 目录中的任何位置创建一个文件，将插件 javascript 复制并粘贴到其中并保存，它仍然可以导入到您的应用中.
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) 使其在您的应用中可用
无论您通过何种方法创建和保存插件脚本，您仍然必须将文件直接导入到您的应用程序中.您可以在 Brocfile.js 中执行此操作.在 module.exports = app.toTree();.
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');
在 ember-cli 文档的管理依赖项部分 中有更多信息.
在某些情况下，您不希望始终在应用中加载/运行脚本.例如，只有当用户正在使用 IE.在这种情况下，您可以在 public/assets 中创建一个目录来保存 javascript 文件并使用 jQuery 的 $.getScript() 方法在初始化程序中或其他地方加载它们您的 Ember 应用.
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.
我在这里回答了一个类似的问题.
这篇关于如何将日期选择器或任何通用 jQuery 插件添加到 Ember-CLI 应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
