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>

但自然这样的事情不存在。我认为有一些第三方图书馆可以做到这一点，但感觉有点过分。

我还尝试用以下方式触发使用javascript触发eventLink：

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

Étvoilà！

- 编辑：

因此，由于这不适用于其他形式，我们会尝试别的。

click()的问题在于它不是本机事件，也不会提供给Prototype的事件管道。您可以手动触发区域更新，如下所示：

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

Answer 2

您可以在eventlink的主体中嵌套一个按钮。

<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>

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

2 个答案: