如何将元素的内容放入数组?(适用于Polymer dom repeat)

Question

让我描述一下我的情况以及我想做什么。假设我有2个自定义元素

x-register.html和x-register-card.html

在x-register.html中有一个静态的x-register卡，但也有添加更多卡（最多5张）的按钮。

如何准确地将x-register-card.html的内容放入数组，然后在我的主元素（x-register.html）中使用它作为

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

这是我的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: ""
      }
    }

  });
})();

x寄存器卡中的属性角色只是用作<x-register-card role="My friend"><x-register-card> 的字符串

我正在尝试获取内容（也许是ID并将其推送到数组）-假设我在数组中已经有3个项目，所以我的x-register.html显示了3个注册卡。我该怎么做？

//问题编辑

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>