在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()方法定义它。当视图附加到DOM时调用attached()。那时你将拥有DOM中的所有元素。当你从constructor调用它时，视图尚未初始化，因此jQuery找不到.timepicker元素。

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

  detached() {
    // ...
  }
}

还有detached()方法，你应该用它来清理（破坏插件实例）。但是，Wickedpicker似乎没有破坏支持。

有关Aurelia视图模型生命周期的更多信息，请参阅Dwayne Charrington's post。

更多提示：

• 使其工作后，将其封装到自定义属性或自定义元素。在常规视图模型中不使用DOM始终是个好主意。
• 使用ref命名视图中的元素，并在视图模型中使用它们。即<input ref="timepicker"...然后在视图模型中你可以使用$(this.timepicker)...。更多信息可以在another SO question找到。