如何将元素的内容放入数组？ （用于聚合物dom-repeat）

Question

让我描述一下我的情况以及我想做的事情。 我们说我有2个自定义元素

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

在x-register.html中有一个静态x-register-card，但也有按钮可以添加更多卡（最多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-register-card中的属性角色只是用作<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>