A dom-repeat that supports multiple template definitions

[ This description is mirrored from README.md at github.com/dumbbillyhardy/dynamic-repeat on 2019-05-10 ]

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>

Install

Link to this version
ImportedReleased 20 August 2017MIT License
Framework Support
Polymer 2.0+
Browser Compatibility
Install with
bower install --save dumbbillyhardy/dynamic-repeat"#0.2.0"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 0.2.0

Dependencies

  • polymer#1.9 - 2