Question

我想在Aurelia有一个自定义时间选择器。 View的一部分，你可以在这里看到：

<template>
<require from="time-picker"></require>
.
.
<input timepicker id="time-setting" value.bind="currentTime">

time-picker.ts就在这里：

import { customAttribute, inject } from "aurelia-framework";
import $ from "jquery";
import "pickadate/lib/compressed/picker.time";

@customAttribute("timepicker")
@inject(Element)
export class TimePicker {

  private usePickADate: boolean;

  constructor(private element: Element) {
  }

  public attached() {
      $(this.element).pickatime()
        .on("change", (e: any) => {
          fireEvent(e.target, "input");
        });
  }

  public detached() {
      $(this.element).pickatime("picker")
        .off("change")
        .stop();
    }
}

function createEvent(name: string) {
  const event = document.createEvent("Event");
  event.initEvent(name, true, true);

  return event;
}

function fireEvent(element: EventTarget, name: string) {
  const event = createEvent(name);
  element.dispatchEvent(event);
}

它没有用，我不明白问题出在哪里。我在网上找到了一些相关的代码，并编写了我的代码。你能帮我吗？

Answer 1

你的问题太模糊了。什么不正常工作？你究竟采取了哪些步骤？根据您发布的代码，您似乎遇到了许多问题。

以下是我用来获取原型的步骤：我从一个空白的cli生成项目开始。 au new timepickertest

我选择了RequireJS模块加载器和Default TypeScript设置。在运行完毕之后，我尝试使用cli来安装必需的包：au install jquery pickadate

这似乎正确地安装了关于npm而不是aurelia的软件包，所以一旦完成，我需要更新aurelia_project/aurelia.json文件。在文件的依赖项部分，我必须添加以下内容：

  "jquery",
  {
      "name": "picker",
      "path": "../node_modules/pickadate/lib",
      "main": "compressed/picker",
      "deps": ["jquery"],
      "resources": ["themes/default.css"]
  },
  {
      "name": "pickatime",
      "path": "../node_modules/pickadate/lib",
      "main": "compressed/picker.time",
      "deps": ["picker"],
      "resources": ["themes/default.time.css"]
  }

完成后，我更新了src\app.ts以包含：

export class App {}

src\app.html包含

<template>
  <require from="picker/themes/default.css"></require>
  <require from="pickatime/themes/default.time.css"></require>
  <require from="time-picker"></require>
  <input timepicker type="text">
</template>

我还使用以下内容创建了src\time-picker.ts：

import { customAttribute, inject } from 'aurelia-framework'
import * as $ from 'jquery';
import 'picker';
import 'pickatime';

@customAttribute("timepicker")
@inject(Element)
export class TimePicker {
  constructor(private element: Element) {
  }

  public attached() {
      $(this.element).pickatime()
        .on("change", (e: any) => {
          this.fireEvent(e.target, "input");
        });
  }

  createEvent(name: string) {
    const event = document.createEvent("Event");
    event.initEvent(name, true, true);
 console.log(name, event);
    return event;
  }

  fireEvent(element: EventTarget, name: string) {
    const event = this.createEvent(name);
    element.dispatchEvent(event);

    console.log(element, name);
  }
}

我有许多console.log语句来验证方法是否按预期调用并具有预期值。过去，我不知道你想要完成什么，因为你没有在你的问题中包括那些。

如果这不能回答你的问题，请详细说明你到目前为止所做的事情，你还尝试了什么，以及“它不起作用，我不明白问题出在哪里”。装置

在Aurelia使用jQuery的时间选择器

1 个答案: