How to set dom-if property in polymer termplate

Flow
1

Hi,

I am trying to a polymer template which has a dom-if condition like:

<template is="dom-if" if="{{isValidConfig}}">
	.....
</template>
<template is="dom-if" if="{{!isValidConfig}}">
	.....
</template>

I want to set the property from server side with code like:

setIsValidConfig(true);

However, the layout didn’t show as expected. Please advise what else I should do to make that template rendered as expected.

Best regards,
Joey

2

Sorry that the templates was not well pasted. Here are the template codes:

<template is="dom-if" if="{{isValidConfig}}">
...
</template>
<template is="dom-if" if="{{!isValidConfig}}">
...
</template>

And the serverside code is:
setIsValidConfig(true);

Please kindly advise.

Best regards,
Joey

3

You will need to add the isValidConfig property to your Template Model in order to pass it from the server to the client. For example like this:
example-template.html:

<dom-module id="example-template">
    <template>
        <span>[[value]
]</span>
        <template is="dom-if" if="[[isValidConfig]
]">
            foo
        </template>
        <template is="dom-if" if="[[!isValidConfig]
]">
            bar
        </template>
    </template>

    <!-- Polymer boilerplate to register the example-template element -->
    <script>
        class ExampleTemplate extends Polymer.Element {
            static get is() {
                return 'example-template'
            }
        }
        customElements.define(ExampleTemplate.is, ExampleTemplate);
    </script>
</dom-module>

ExampleTemplate.java:

@Tag("example-template")
@HtmlImport("src/example-template.html")
public class ExampleTemplate extends PolymerTemplate<ExampleModel> {

    public ExampleTemplate() {
        // Set the initial value to the "value" property.
        getModel().setValue("Shown inside <span>");
        getModel().setIsValidConfig(false);
    }

    public void setValue(String value) {
        getModel().setValue(value);
    }

    public void setIsValidConfig(boolean isValidConfig) {
        getModel().setIsValidConfig(isValidConfig);
    }

    public interface ExampleModel extends TemplateModel {

        void setValue(String value);

        void setIsValidConfig(boolean isValidConfig);
    }
}

Read more about working with Template Models in the docs here: https://vaadin.com/docs/v11/flow/polymer-templates/tutorial-template-bindings.html

4

Thanks a lot. The problem solved.

Best regards,
Joey