Tapestry 5.2 中是否有一些本地方法可以将 eventLink 转换为按钮

Question

我的问题很简单。我想使用按钮作为事件链接。

tml 中的表单内部存在基于 AJAX 的事件链接。事件链接具有动态更新表单某些部分的功能：

<t:eventlink t:event="editPlace" t:zone="dialogZone" class="jqModal place editPlace"
 t:context="placeId">${message:editPlace}</t:eventlink>

我希望 eventLink 成为一个按钮，如下所示：

<t:eventButton t:event="editPlace" t:zone="dialogZone" class="jqModal place editPlace"
 t:context="placeId">${message:editPlace}</t:eventButton>

但自然这样的东西不存在。我认为有一些第三方库可以做到这一点，但感觉有点矫枉过正。

我还尝试通过以下方式欺骗 eventLink 用 javascript 触发：

<button type="button" onclick="jQuery(this).next('a').click();">
  ${message:editPlace}
</button>
<t:eventlink t:event="editPlace" t:zone="dialogZone" class="jqModal place editPlace" 
 t:context="placeId">${message:editPlace}</t:eventlink>

正确找到了锚点，但不起作用。还有其他选择吗？

编辑：使问题更清楚。

Answer 1

如果我理解正确的话，您希望通过单击按钮来更新区域。您不需要任何自定义组件来执行此操作，通常的 Form、Submit 和 Zone 组件就可以了。

只需在模板中使用按钮创建一个表单并设置其 zone 参数即可：

<div t:type="Zone" t:id="dialogZone" id="dialogZone" />

<form t:type="Form" t:id="myForm" t:zone="dialogZone" t:context="placeId">
    <input type="submit" t:type="Submit" value="Click me" />
</form>

在页面类文件中，设置事件侦听器来侦听表单提交并返回区域的正文：

@Inject
private Request request;

@InjectComponent
private Zone dialogZone;

@OnEvent(component="myForm", value=EventConstants.SUCCESS)
Object linkClicked(String placeId) {
    //your code here

    if (this.request.isXHR()) {
       return this.dialogZone.getBody();
    } else {
       return this;
    }
}

瞧！

--编辑：

因此，由于这在其他表单中不起作用，因此我们将尝试其他方法。

click() 的问题在于它不是本机事件，并且不会馈送到 Prototype 的事件管道中。您可以手动触发区域更新，如下所示：

var actionLink = jQuery(this).next('a');
Tapestry.findZoneManager(actionLink).updateFromURL(actionLink.href);

Answer 2

您可以在事件链接的主体中嵌套一个按钮。

<t:eventlink event="doIt"><button>Do it</button></t:eventlink>

或者您可以使用 CSS 将链接样式设置为看起来像按钮。例如，如果您使用 twitter-bootstrap 的 CSS，您可以执行以下操作：

<t:eventlink event="doIt" class="btn btn-primary">Do it</t:eventlink>