javascript - 如何将日期选择器或任何通用 jQuery 插件添加到 Ember-CLI 应用程序

Question

所以我正在尝试将 pikaday 日期选择器添加到 Ember-CLI 应用程序。

我的 /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 中？

这是 pikaday 的 github 链接:https://github.com/dbushell/Pikaday

更具体地说，我认为这部分可能很重要，因为 Ember-CLI 使用 AMD:https://github.com/dbushell/Pikaday#amd-support

那么如何将插件本身添加到 ember-cli 中呢？

Answer 1

更新

自从写下这个答案后，Ember Addon API 变得更加可用，如果您要构建添加到常规 js 插件的 Ember 组件/mixin/其他类，它是一个完美的选择。

常规安装

在“常规安装”情况下，您希望插件可以通过您的应用程序使用，并且无论如何都包含在应用程序的有效负载中。为此，将文件/包添加到项目的 vendor 目录中。有两种立即可用的方法可以做到这一点:使用 Bower或者简单地在目录中保存一个文件或包。

1) 凉亭

使用 Bower 通过终端安装包，例如:

bower install ember-validations

或者，如果没有可用的易于安装的 Bower 包，请在您的 bower.json 文件中:

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

2) 写入文件

您不必使用 Bower 将文件和目录添加到您的 vendor 目录。您可以在 vendor 目录中的任何位置创建一个文件，将插件 javascript 复制并粘贴到其中并保存，它仍然可以导入到您的应用中。

3) 使其在您的应用中可用

无论您创建和保存插件脚本的方法如何，您仍然必须将文件直接导入到您的应用程序中。您可以在 Brocfile.js 中执行此操作。在 module.exports = app.toTree(); 之前添加带有文件路径的导入(如果是 bower 安装包，则为主文件)。

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

Managing Dependencies section of the ember-cli docs 中有更多信息.

Polyfill 或其他非必要的插件

在某些情况下，您不希望始终在应用中加载/运行脚本。例如，您正在加载一个大的 polyfill仅当用户使用 IE 时。在这种情况下，您可以在 public/assets 中创建一个目录来保存 javascript 文件，并在初始化程序或其他地方使用 jQuery 的 $.getScript() 方法加载它们你的 Ember 应用程序。

关于这种情况我回答了类似的问题here .