0

私はタペストリー 5.3.3 を使用しています (問題 #1844 のパッチが含まれています)...

「onchange」イベントをキャッチして処理する簡単な方法はありますか?つまり、ユーザーが(ポップアップを介して)新しい日付を選択する場所はありますか?

私はもう試した：

<t:datefield value="dateValue" onchange="alert('here');" />

ありがとう、ポール。

4

2 に答える 2

2

入力フィールドで変更イベントをキャッチできます。プロトタイプを使用している場合は、これを試してください：

$('dateFieldId').observe('change', function(){
    alert('gotcha!');
    ...do whatever you will ...
});

このjsをページに追加する最良の方法は、@Importアノテーションを使用してページ/コンポーネントに貢献するページ/コンポーネントに追加された別のjsファイルを使用することです。

Tapestry.Initializer.FieldChangeObserver = function (parameters) {
    new FieldChangeObserver (parameters);
};

var FieldChangeObserver  = { };
FieldChangeObserver  = Class.create({
    initialize:function(parameters) {
    $(parameters.dateFieldId).observe('change', function(){
            alert('gotcha!');
            ...do whatever you will ...
        });
    }
});

次に、ページ/コンポーネントで次のことができます。

@Inject
private JavaScriptSupport javaScriptSupport;

@Component
private DateField dateField;

@AfterRender
private void afterRender() {
    JSONObject params = new JSONObject()
    params.put("dateFieldId", dateField.getCLientId());
    javaScriptSupport.addInitializerCall("FieldChangeObserver", params);
}

免責事項：私はすぐにこれを書き上げ、コードをテストしませんでした.

于 2012-08-20T07:07:55.333 に答える
0

必要なものを達成するには、両方のアプローチを組み合わせる必要があるようです-タペストリーフレームワーク内でこれを改善する必要があるかどうかは、議論の余地があります....

<t:datefield t:id="selectedDateElem" id="selectedDateElem" onchange="alert('1 onchange attribute');" />

    $("selectedDateElem").observe("change", function(event)
        {
            alert("2 change observer");
        });

    document.observe(Tapestry.FOCUS_CHANGE_EVENT, function(event)
        {
            if (Tapestry.currentFocusField && Tapestry.currentFocusField.id == "selectedDateElem")
                alert("3 focus change observer");
        });

テスト ケース 1:

  • ユーザーが入力フィールドをクリック
  • ユーザーが入力フィールドの値を変更する
  • ユーザーが入力フィールドの外をクリックした
  • --> 「1 onchange 属性」 & 「2 変更オブザーバー」

テスト ケース 2:

  • ユーザーが日付ピッカー アイコンをクリックする
  • ユーザーはポップアップから新しい日付を選択します
  • --> 「3 フォーカスチェンジオブザーバー」

したがって、 onchange 属性は変更オブザーバーと同等であるため、唯一の完全な解決策は、アプローチ 2 と 3 を組み合わせることです。

     $("selectedDateElem").observe("change", function(event)
        {
            Page.dateFieldChanged();
        });

    document.observe(Tapestry.FOCUS_CHANGE_EVENT, function(event)
        {
            if (Tapestry.currentFocusField && Tapestry.currentFocusField.id == "selectedDateElem")
                Page.dateFieldChanged();
        });
于 2012-08-23T10:07:51.157 に答える