A web component inspired by ngRepeat from the AngularJS framework.
You can simply include the either the ES5 version from dist/ or the ES2015 version from src/ into your project and make use of the custom element rebel-repeater.
<script src="dist/rebel-repeater.js"></script>
<ul>
<rebel-repeater shadow="true">
<li>${firstName} ${lastName}</li>
</rebel-repeater>
</ul>
<script>
document.querySelector("#people").setContent([{"firstName": "Bilbo", "lastName": "Baggins"}, {"firstName": "Frodo", "lastName": "Baggins"}, {"firstName": "Samwise", "lastName": "Gamgee"}]);
</script>For convenience you can also install it via npm: npm install rebel-repeater
This web component uses V1 of the Custom Elements specification, to get this working in most browsers you are going to need to use a polyfill. It is recommended that you include the following SkateJS Web Components polyfill:
<script src="https://unpkg.com/skatejs-web-components/dist/index-with-deps.min.js"></script>
At this point in time the component is very primitive and more a proof of concept than anything useful.
| Attribute Name | Required | Type | Example | Comments |
|---|---|---|---|---|
| shadow | No | boolean | true, false | Used to tell the component if it should wrap the repeated content within the Shadow DOM |
You create the template which is to be repeated within the rebel-repeater element itself and make use of the ES2015 template string variables ${} to pull out object properties. For example if you had populated the content attribute with an array of objects which look like this:
{
"title": "Game of Thrones",
"genre": "Adventure, Drama, Fantasy"
}
You could write the following template to pull out the show title:
<p>${title}</p>
To contribute to this project all you will need is jspm installed and a love of web components. Please submit any suggestions or changes via a pull request.