Question

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

我在供应商文件夹中添加了库，并在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引用组件，$()将元素作为jQuery对象返回。所以this.$()表示组件作为jQuery对象。一旦你将元素作为jQuery对象，那么你可以调用jQuery插件。但是你需要等到Ember在访问元素之前将元素添加到DOM中。

Answer 2

确保您还包含jQuery UI（带有datepicker和滑块小部件），因为它是timePicker插件要求。

在ember-cli中安装jQuery插件

2 个答案: