如何将日期选择器或任何常规jQuery插件添加到Ember-CLI App

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已经变得更加实用,如果你正在构建一个Ember组件/ mixin /其他类添加到常规js插件中,它是一个完美的选择.

定期安装

在"常规安装"情况下,您希望通过您的应用程序提供该插件,并将其包含在应用程序的有效负载中,无论如何.为此,请将文件/包添加到项目的vendor目录中.有两种立即可用的方法:使用Bower或只是在目录中保存文件或包.

1)凉亭

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

bower install ember-validations

或者,如果您的bower.json文件中没有可用的简易安装Bower软件包:

{
  "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();.

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

在ember-cli文档的Managing Dependencies部分中有更多信息.

Polyfill或其他非必要的插件

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

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