Mit Wickedpicker in Aurelia

Question

Ich möchte Wickedpicker in Aurelia verwenden. Ich habe die folgenden Codes in HTML-Datei:

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

Und in View-Modell ich diesen Code haben:

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); 

I wickedpicker über jspm (jspm installieren npm: wickedpicker) installiert und wenn ich auf Eingabefeld gibt es keinen Effekt und keinen Fehler. Könnten Sie mir bitte helfen?

Answer 1

Tun Sie es nicht in Ansicht Modell constructor. Definieren Sie dies stattdessen in attached() Methode. attached() wird aufgerufen, wenn die Ansicht an DOM angehängt ist. In diesem Moment haben Sie alle Elemente im DOM. Wenn Sie es von dem constructor aufrufen, ist die Ansicht noch nicht initialisiert, daher kann jQuery .timepicker Element nicht finden.

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

    detached() { 
    // ... 
    } 
} 

Es gibt auch detached() Methode, die Sie zu bereinigen (die Plugin-Instanz zerstören) verwenden sollten. Es scheint jedoch nicht, dass Wickedpicker die Zerstörung Unterstützung hat.

Weitere Informationen über Aurelia Ansicht Modelllebenszyklus finden Sie in Dwayne Charrington's post.

paar Tipps:

• Sobald Sie es funktioniert, kapseln es zu einem benutzerdefinierten Attribut oder einem benutzerdefinierten Element. Es ist immer eine gute Idee, in normalen Ansichtsmodellen nicht mit DOM zu arbeiten.
• Verwenden Sie ref, um Elemente in der Ansicht zu benennen und sie innerhalb des Ansichtsmodells zu verwenden. I.e. <input ref="timepicker"... und dann in View-Modell können Sie $(this.timepicker)... verwenden. Weitere Informationen finden Sie in another SO question.