javascript - 在 ember-cli 中安装 jQuery 插件

Question

我需要安装this ember-cli 中的 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 插件。该钩子(Hook)名为 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指的是组件和 $()将元素作为 jQuery 对象返回。所以this.$()表示组件作为 jQuery 对象。一旦你有了一个 jQuery 对象的元素，那么你就可以调用 jQuery 插件了。但是您需要等到 Ember 将元素添加到 DOM 后才能访问该元素。