RactiveJS で Pikaday の日付ピッカーをデコレータとして使用しており、デコレータの外で datepicker の api にアクセスしたいのですが、return オブジェクトに追加してもうまくいかないようです。誰かが私を正しい方向に向けることができますか?
2 に答える
デコレーターは、Ractive と外部ライブラリーの間の再利用可能なブリッジになるように設計されてstartdate
いenddate
ますpikaday
。
デコレーター関数は、それ自体の状態を管理し、Ractive インスタンスと対話する役割を果たします。デコレータ (つまり、Pikaday インスタンス) によって作成されたオブジェクトへの参照を取得しようとしていることに気付いた場合、それは通常危険信号です。
これを行う方法の 1 つを次に示します: http://jsbin.com/susev/5/edit?html,js,output
この例では、デコレータの両方のインスタンスにキーパスを渡しています。pikadayDecorator
関数が各<input>
ノードで呼び出されると、ノードとキーパスの 2 つの引数で呼び出されます。(追加の引数を指定できます。カンマで区切るだけです。)
その後、デコレーターは双方向バインディングを設定できます。指定されたキーパス (または など) を監視し、変更されたときにPikadayインスタンスのメソッドを呼び出します。また、このメソッドを使用して、選択した日付が変更されたときに Ractive のモデルを更新します。これは、テンプレートの他の場所、または Ractive インスタンスの外でも日付を使用できることを意味します。startdate
enddate
setDate()
onSelect()
ractive.observe('startdate', function (newDate) {
// This may have been as a result of a `ractive.set()`, or
// because the user interacted with the datepicker
console.log('startdate changed to', newDate);
});
(Pikaday は「2015-01-01」などの文字列を日付オブジェクトに自動的に変換することに注意してください。)
docs にデコレータの作成に関する詳細情報があります。