我正在尝试创建一个组件，如果给出以下 tml:
<t:slideout>
<p:header>Short Description of Data</p:header>
Long Details about the data here
</t:slideout>
这应该首先在 header 参数中呈现该 block ，当单击该 block 时，我希望使用 jQuery .slideDown() 函数或等效函数滑出长详细信息部分。
目前我有以下类(class):
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 中解决此问题的最佳方法是什么？
最佳答案
您可以在 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>
免责声明:我尚未测试此代码，因此请尝试一下。
关于java - 如何在自定义 Tapestry 5 组件中使用 jQuery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11363058/