Skip to content
A dom-repeat that supports multiple template definitions
HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
.gitignore
LICENSE.txt
README.md
bower.json
dynamic-repeat.html
temp-latizer.html

README.md

Published on webcomponents.org

You can use dynamic-repeat exactly the same way you'd use dom-repeat, but with several differences. You can pass multiple templates into dynamic-repeat and, based on the precedence, the correct template will be chosen to render each item. The items array should be an array of objects containing the properties prop and type. If a template is found for prop, that is used. It then checks type, and finally checks for a default template. Mark templates with the for attribute.

<script>
window.onload = () => {
    dynamicRepeat.items = [{
value: "test@test.com",
       prop: "email",
       type: "string",
    }, {
value: "Female",
           prop: "gender",
           type: "string",
    }, {
value: "!QAZ2wsx#EDC4rfv",
           prop: "password",
           type: "encrypted",
    }, {
value: "29",
           prop: "age",
           type: "number",
    }];
};
</script>

<dynamic-repeat id="dynamicRepeat">
    <template for="email">mailto: [[item.value]]</template>
    <template for="string">"[[item.value]]"</template>
    <template for="encrypted">****</template>
    <template>[[item.value]]</template>
</dynamic-repeat>
You can’t perform that action at this time.