在 Aurelia 中使用 Wickedpicker

Question

我想在 Aurelia 中使用 Wickedpicker。我在 HTML 文件中添加了以下代码：

<require from="wickedpicker"></require>
<input type="text"  name="timepicker" class="timepicker"/>
...

在 View-Model 我有这个代码：

import "wickedpicker"
.
.
constructor(){
let options = {
      now: "12:35", //hh:mm 24 hour format only, defaults to current time
      twentyFour: false,  //Display 24 hour format, defaults to false
      upArrow: 'wickedpicker__controls__control-up',  //The up arrow class selector to use, for custom CSS
      downArrow: 'wickedpicker__controls__control-down', //The down arrow class selector to use, for custom CSS
      close: 'wickedpicker__close', //The close class selector to use, for custom CSS
      hoverState: 'hover-state', //The hover state class to use, for custom CSS
      title: 'Timepicker', //The Wickedpicker's title,
      showSeconds: false, //Whether or not to show seconds,
      timeSeparator: ' : ', // The string to put in between hours and minutes (and seconds)
      secondsInterval: 1, //Change interval for seconds, defaults to 1,
      minutesInterval: 1, //Change interval for minutes, defaults to 1
      beforeShow: null, //A function to be called before the Wickedpicker is shown
      afterShow: null, //A function to be called after the Wickedpicker is closed/hidden
      show: null, //A function to be called when the Wickedpicker is shown
      clearable: false, //Make the picker's input clearable (has clickable "x")
    };
    let timepicker = $('.timepicker').wickedpicker(options);

我通过 jspm (jspm install npm:wickedpicker) 安装了 wickedpicker，当我点击输入框时没有效果也没有错误。 你能帮帮我吗？

Answer 1

不要在视图模型的constructor 中这样做。而是在 attached() 方法中定义它。 attached() 在视图附加到 DOM 时被调用。在那一刻，您将拥有 DOM 中的所有元素。当您从constructor 调用它时，视图尚未初始化，因此jQuery 找不到.timepicker 元素。

class ViewModel {
  attached() {
    let options = { ... };
    $('.timepicker').wickedpicker(options);
  }

  detached() {
    // ...
  }
}

还有detached() 方法可以用来清理（销毁插件实例）。但是，Wickedpicker 似乎没有破坏支持。

更多关于 Aurelia 的视图模型生命周期的信息可以在Dwayne Charrington's post找到。

更多提示：

• 一旦你让它工作，将它封装到自定义属性或自定义元素中。最好不要在常规视图模型中使用 DOM。
• 使用ref 命名视图中的元素并在视图模型中使用它们。 IE。 <input ref="timepicker"... 然后在视图模型中您可以使用$(this.timepicker)...。更多信息请访问another SO question。