1

Ractive テンプレートで jquery-ui の datepicker を使用していますが、双方向バインディングが正しく機能していないようです。

私の入力は次のようになります。

<input type="text" value="{{value}}" decorator="picker">

次に、「ピッカー」デコレータを使用して日付ピッカーをインスタンス化します。

decorators: {
            picker: function(node) {
                $(node).datepicker();
                return {
                    teardown: function() {
                        $(node).datepicker("destroy");
                    }
                };  
            },
        }

日付ピッカーは完全に表示されますが、値が適切に更新されません。{{value}} を通過して観察すると、datepicker によって値が設定されると、値が変更されたと Ractive が認識していないことがわかります。フィールドをクリックして再び戻ると (フォーカスが失われます)、オブザーバーがトリガーされ、値が設定されます。

私のデコレーターでは、datepickers の「onSelect」イベントを使用してトリガーするようにコールバックをセットアップできますが、デコレーター関数から強制的な変更イベントを強制するにはどうすればよいですか?

decorators: {
    picker: function(node) {
        $(node).datepicker({
                onSelect: function(dateValue) {
                    console.log("datevalue set");
                    //I've tried this already
                    $(node).change();
                    //and
                    $(node).trigger("change");
                    //neither work
                }
        });
        return {
            teardown: function() {
                $(node).datepicker("destroy");
            }
        };  
    },
}
4

2 に答える 2