Wie lege ich den Inhalt des Elements in Array? (für Polymer dom-repeat)

Question

lassen Sie mich meine Situation beschreiben und was ich tun möchte. Sagen wir, ich habe 2 benutzerdefinierte Elemente

x-register.html und x-Register-card.html

In x-register.html ist eine statische x-Register-Karte, aber es gibt auch Schaltfläche hinzufügen mehr Karten (bis zu 5).

Wie genau platziere ich Inhalt meines x-Register-card.html zu Array und es dann in meinem Hauptelement verwenden (x-register.html) als

<templare is="dom-repeat" item="cardArray" as="card"> 
    <section> <!-- wrapper for each card --> 
    <x-register-card></x-register-card> <!-- dynamic element --> 
    </section> 
</template> 

Hier Code meines x -Register-card.html

<template> 
    <style include="shared-styles"> 
    /* Element */ 
    :host { 
    display: block; 
    } 

</style> 

    <h4>Register</h4> 
    <paper-input label="Username"></paper-input> 
    <paper-input label="First Name></paper-input> 
    <paper-input label="Surname"></paper-input> 
    <paper-input label="Password" type="password"></paper-input> 

<template> 
<script> 
(function() { 
    'use strict'; 
    Polymer({ 

    /** 
    * Element configuration. 
    */ 
    is: 'x-register-card', 
    property: { 
     role: { 
     type: String, 
     value: "" 
     } 
    } 


    }); 
})(); 

Property Rolle in x-Register-Karte ist nur String als <x-register-card role="My friend"><x-register-card> verwendet

Ich versuche, Inhalt (vielleicht ist es ID und push es zum Array) zu nehmen - sagen wir, ich habe bereits 3 Elemente im Array so im meinem x-register.html 3 Register-Karten angezeigt werden. Wie mache ich das?

// Frage bearbeitet

Answer 1

<template is="dom-repeat" items="[[cards]]" as="card"> 
    <section> 
    <x-register-card header="[[card.header]]" text="[[card.text]]"></x-register-card> 
    </section> 
</template> 

<script> 
    ... 
    function add() { 
    this.push('cards', {header: 'card', text: 'some text'}); 
    } 
    ... 
</script>