tapestry - datefield onchange 处理程序，仅限客户端

Question

我正在使用 Tapestry 5.3.3（其中包括问题 #1844 的补丁）...

有没有一种简单的方法来捕捉和处理“onchange”事件，即用户选择一个新日期（通过弹出窗口）？

我试过了：

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

谢谢，保罗。

Answer 1

您可以在输入字段上捕获更改事件。如果您使用的是原型，请尝试以下操作：

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

我发现将此 js 添加到您的页面的最佳方法是使用添加到您的页面/组件的单独 js 文件，您使用@Import注释为您的页面/组件做出贡献：

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

免责声明：我很快就写了下来，没有测试代码。

Answer 2

看来我必须结合两种方法来实现我所需要的——这是否应该在挂毯框架内进行改进还有待商榷....

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