Using sub-template from PolymerTemplate

You can configure Java instances to be created for custom elements inside your HTML template file with the @Uses annotation.

Here is an example of parent HTML template file:

HTML

<link rel="import" href="/bower_components/polymer/polymer-element.html">
<link rel="import" href="/com/example/ChildTemplate.html">
<dom-module id="parent-template">
    <template>
        <div>Parent Template</div>
        <div>[[name]]</div>
        <child-template>
    </template>
    <script>
        class ParentTemplate extends Polymer.Element {
            static get is() { return 'parent-template' }
        }
        customElements.define(ParentTemplate.is, ParentTemplate);
    </script>
</dom-module>

The Java counterpart defines that ChildTemplate should be instantiated for any template element with a matching tag name (i.e. child-template).

Java

@Tag("parent-template")
@HtmlImport("/com/example/ParentTemplate.html")
@Uses(ChildTemplate.class)
public class ParentTemplate extends PolymerTemplate<Model> {
}
public interface Model extends TemplateModel {
    void setName(String name);
    String getName();
}

The HTML template uses a child-template element, which is a custom element defined in ChildTemplate.html. Since the client-side implementation of child-template depends on a click handler defined from server-side Java, an instance of ChildTemplate must be created on the server. By using @Uses(ChildTemplate.class), this instance will automatically be created and hooked up with the <child-template> element in the parent template based on the @Tag("child-template") annotation value.

Here is the child template Java code:

Java

@Tag("child-template")
@HtmlImport("/com/example/ChildTemplate.html")
public  class ChildTemplate extends PolymerTemplate<TemplateModel> {
    @EventHandler
    private void handleClick() {
        System.out.println("Click on Button in the child template");
    }
}

And it’s the HTML template counterpart:

HTML

<link rel="import" href="/bower_components/polymer/polymer-element.html">
<dom-module id="child-template">
    <template>
        <button on-click="handleClick">Child Template</button>
    </template>
    <script>
        class ChildTemplate extends Polymer.Element {
            static get is() { return 'child-template' }
        }
        customElements.define(ChildTemplate.is, ChildTemplate);
    </script>
</dom-module>

This template delegates a click handler to the server side and the method handleClick will be called on the ChildTemplate instance (not ParentTemplate instance).