如何在自定义 Tapestry 5 组件中使用 jQuery答案

【问题标题】：How can I use jQuery in a custom Tapestry 5 component如何在自定义 Tapestry 5 组件中使用 jQuery
【发布时间】：2012-07-06 13:24:26
【问题描述】：

我正在尝试创建一个组件，如果给定以下 tml：

<t:slideout>
    <p:header>Short Description of Data</p:header>

    Long Details about the data here
</t:slideout>

这应该最初在 header 参数中呈现块，当单击此块时，我希望使用 jQuery .slideDown() 函数或等效函数滑出长细节部分。

目前我有以下课程：

public class slideout
{
    @Parameter(name="header", defaultPrefix = BindingConstants.LITERAL)
    private Block headerBlock;

    public Block getHeader() 
    {
    return headerBlock;
    }
}

以及对应的slideout.tml文件：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd"
    xmlns:p="tapestry:parameter">
<body>
    <t:delegate to="header"/>
    <t:body/>
</body>
</html>

我们已经在使用 Tapestry5-jQuery 库，这个组件需要能够在同一个页面上多次使用，所以我也不确定如何确保在渲染页面时没有 ID 冲突.

我不知道从哪里开始，如果我在原始 HTML/jQuery 中这样做，我会做类似的事情

$('slideout-header').click(function() {
    $(this).next('slideout-body').slideDown();
});

但是我不确定构建这些类的“Tapestry”方式是什么。在 Tapestry 5 中解决此问题的最佳方法是什么？

【问题讨论】：

标签： java jquery tapestry

【解决方案1】：

您可以在 Slideout.tml 旁边添加一个 Slideout.js 文件：

Tapestry.Initializer.Slideout = function (parameters) {
    var yourClientId = parameters.clientId;
    //your javascript init script here
};

添加到您的 Slideout.java：

@Import(library = {"Slidout.js"})
public class Slideout {

    @Inject
    private JavaScriptSupport javaScriptSupport;

    @Parameter(name="header", defaultPrefix = BindingConstants.LITERAL)
    private Block headerBlock;

    @Property
    @Parameter(value = "prop:componentResources.id", defaultPrefix = "literal")
    private String clientId;

    @AfterRender
    private void afterRender() {
        JSONObject props = new JSONObject();
        props.put("clientId", clientId);
        javaScriptSupport.addInitializerCall("Slideout", props);
    }

    public Block getHeader() 
    {
        return headerBlock;
    }
}

和您的 Slideout.tml（请注意，我删除了 html 以便您可以将 Slideout 用作组件）

<div id="${clientId}" xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd"
    xmlns:p="tapestry:parameter">
    <t:delegate to="header"/>
    <t:body/>
</div>

免责声明：我没有测试过这段代码，所以可以玩一下。

【讨论】：