Skip to content

A dom-repeat that supports multiple template definitions

License

Notifications You must be signed in to change notification settings

dumbbillyhardy/dynamic-repeat

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

30 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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>

About

A dom-repeat that supports multiple template definitions

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages