AureliaでWickedPickerを使用する

Question

AureliaでWickedpickerを使用します。 （JSPM NPMインストール：wickedpickerを）私はJSPM経由wickedpickerをインストール

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

：私はこのコードを持っている

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

を、ビュー・モデルに：私は、HTMLファイルに次のコードを追加し、私は上のクリックしたとき入力ボックスには何の効果もなくエラーもありません。 私を助けてもらえますか？

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にあります。