Directory

← Back

dynamic-repeat

A dom-repeat that supports multiple template definitions

Author

Rating

Popularity

<100

[ 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>

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • polymer#1.9 - 2
Released
2017-08-20
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Polymer 2.0+
Browser
Browser Independent

dynamic-repeat - Vaadin Add-on Directory

A dom-repeat that supports multiple template definitions dynamic-repeat - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/dumbbillyhardy/dynamic-repeat](https://github.com//dumbbillyhardy/dynamic-repeat/blob/v0.2.0/README.md) on 2019-05-10 ]** [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/billy-hardy/dynamic-repeat) 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. ```html
Online