tapestry - 如何从布局中更改所选项目的 class="active" - Tapestry

Question

爪哇

@Inject
private ComponentResources resources;

public boolean isActiveMenuItemIndex() {
    String item = resources.getPageName().toString();
    return item.contains("Index");
}

TML

<t:if test="${activeMenuItemIndex}">
    <li class="active">
        <t:pageLink page="Index">Index</t:pageLink>
    </li>
    <p:else>
        <li>
            <t:pageLink page="Index">Index</t:pageLink>
        </li>
    </p:else>
</t:if>

这是我的第一个想法，它有效，但是您必须为每个项目创建一个单独的方法，并t:if在 TML 中为每个项目使用一个标签。你对这个问题有更好的解决方案吗？

Answer 1

TML

<t:loop source="pages" item="page">
    <li class="${liClass}">
        <t:pageLink page="prop:page">${page}</t:pageLink>
    </li>
</t:loop>

爪哇

@Inject
private ComponentResources resources;

@Property
private String page;

public String[] getPages() {
     return new String[] { "Index", "Foo", "Bar" };
}

public String getLiClass() {
    return page.equals(resources.getPageName()) ? "active" : "inactive";
}

Answer 2

精简版菜单组件：

菜单.java

public class Menu {

    @Property
    @Parameter(required = true, allowNull = false)
    private List<String> pageNames;

    @Property
    private String pageName;

    @Inject
    private ComponentResources resources;

    @Inject
    private ComponentClassResolver componentClassResolver;

    public boolean isActive() {
        final String shortPageName = componentClassResolver.canonicalizePageName(pageName);
        return resources.getPageName().equals(shortPageName);
    }

    public String getMenuItemClass() {
        return isActive() ? "active" : "";
    }

    public String getMenuItemLabel() {
        // get label from messages
    }
}

菜单.tml

<t:container xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd">

<t:loop source="pageNames" value="pageName">
    <li class="${menuItemClass}">
        <t:pageLink page="prop:pageName">${menuItemLabel}</t:pageLink>
    </li>
</t:loop>

</t:container>