0

次のtmlが与えられた場合にコンポーネントを作成しようとしています:

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

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

これにより、最初にヘッダー パラメーターでブロックがレンダリングされます。このブロックがクリックされると、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 5 でこの問題を解決する最善の方法は何ですか?

4

1 に答える 1

2

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 (Slideout をコンポーネントとして使用できるように、html を削除したことに注意してください)

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

免責事項:私はこのコードをテストしていないので、試してみてください。

于 2012-07-09T12:53:20.450 に答える