node.js - Using Wickedpicker in Aurelia -

i want use wickedpicker in aurelia. added following codes in html file:

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

and in view-model have code:

import "wickedpicker" . . constructor(){ let options = {       now: "12:35", //hh:mm 24 hour format only, defaults current time       twentyfour: false,  //display 24 hour format, defaults false       uparrow: 'wickedpicker__controls__control-up',  //the arrow class selector use, custom css       downarrow: 'wickedpicker__controls__control-down', //the down arrow class selector use, custom css       close: 'wickedpicker__close', //the close class selector use, custom css       hoverstate: 'hover-state', //the hover state class use, custom css       title: 'timepicker', //the wickedpicker's title,       showseconds: false, //whether or not show seconds,       timeseparator: ' : ', // string put in between hours , minutes (and seconds)       secondsinterval: 1, //change interval seconds, defaults 1,       minutesinterval: 1, //change interval minutes, defaults 1       beforeshow: null, //a function called before wickedpicker shown       aftershow: null, //a function called after wickedpicker closed/hidden       show: null, //a function called when wickedpicker shown       clearable: false, //make picker's input clearable (has clickable "x")     };     let timepicker = $('.timepicker').wickedpicker(options); 

i installed wickedpicker via jspm (jspm install npm:wickedpicker) , when click on input box there no effect , no error. please me?

don't in view model's constructor. define in attached() method instead. attached() called when view attached dom. @ moment have elements in dom. when call constructor, view not yet initialized, hence jquery cannot find .timepicker element.

class viewmodel {   attached() {     let options = { ... };     $('.timepicker').wickedpicker(options);   }    detached() {     // ...   } } 

there's detached() method should use clean (destroy plugin instance). however, doesn't seem wickedpicker has destroy support.

more info on aurelia's view model lifecycle can found in dwayne charrington's post.

few more tips:

• once make work, encapsulate custom attribute or custom element. it's idea not work dom in regular view models.
• use ref name elements in view , use them within view model. i.e. <input ref="timepicker"... , in view model can use $(this.timepicker).... more info can found in another question.