Dom-repeat with a parameterized pattern

Question

What is the clean way , using Polymer 2.0 , to parameterize a dom-repeat element template?

Using:

<custom-component> <template id="item-template"> [[item]] </template> </custom-component> 

CustomComponent:

 <dom-module id="custom-component"> <template> <template is="dom-repeat" items="[[foo]]" id="repeater"> <!-- Parameterized template --> </template> </template> <!-- scripts... --> </dom-module> 

I cannot find clear documentation for Polymer 2.0 to achieve this.

Answer 1

I'm just new to learn polymer. Maybe I'm just your question. I think you want to repeat an element that has structure and data, depending on whether you want it to be. And there are 3 points.

demo element.html

 <dom-moudle is="demo-element"> <template> <span>{{property1.name}}</span> <span>{{property1.age}}</span> <script> class DemoElement extends Polymer.Element { static get is() { return 'demo-element'; } static get properties() { return { property1: Object } } } window.customElements.define(DemoElement.is, DemoElement); </script> </template> </dom-moudle> 

order component.html

 <dom-module id="custom-component"> <template> <template is="dom-repeat" items="[[foo]]" id="repeater"> <demo-element property1="[[item]]"></demo-element> </template> </template> </dom-module> 

• The property of the Dom-repeat element will be set in each instance binding area , so you cannot set the dom-repeat item property in custom-component's instance.

• Create a custom item with structure and data as needed. Repeat the special element with dom-repeat .

• slot element is always suitable for Polymer. If you want the custom-component include some other elements, you should use a placeholder.