在 ember-cli 中安装 jQuery 插件

Question

我需要在 ember-cli 中安装 this timePicker。

我在 vendor 文件夹中添加了库并在 Brocfile.js 中导入：

var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var app = new EmberApp();

app.import('vendor/timePicker/jquery-ui-timepicker-addon.js');
app.import('vendor/timePicker/jquery-ui-sliderAccess.js');

module.exports = app.toTree();

我创建了 components/jquery-ui-timepicker-addon.js:

import Em from "ember";
export default Em.TextField.extend({
  dateFormat:'yy-mm-dd',
  timeFormat: 'HH:mm:ss',
  stepHour: 1,
  stepMinute: 1,
  stepSecond: 1
});

我需要从模板中调用它，但我不知道如何调用它。

我想代码类似于：

 {{jquery-ui-timepicker-addon}}

但什么也没发生。

你能帮帮我吗？

此致。

Answer 1

您需要在 Ember 将组件放入 DOM 时调用 jQuery 插件。这个钩子叫做 didInsertElement

这样做：

import Em from "ember";
export default Em.TextField.extend({
  setupTimepicker: function() {
    this.$().timepicker({
      dateFormat:'yy-mm-dd',
      timeFormat: 'HH:mm:ss',
      stepHour: 1,
      stepMinute: 1,
      stepSecond: 1
    )}
  }.on('didInsertElement')
});

this.$()的解释： this 将组件和 $() returns 元素作为 jQuery 对象。所以 this.$() 表示组件作为 jQuery 对象。一旦将元素作为 jQuery 对象，就可以调用 jQuery 插件。但是您需要等到 Ember 将元素添加到 DOM 之后才能访问该元素。

Answer 2

确保您还包括 jQuery UI（带有日期选择器和滑块小部件），因为它是 timePicker 插件的要求。

在 ember-cli 中安装 jQuery 插件

Install jQuery plugins in ember-cli

javascript

jquery

ember.js

ember-cli

timepicker