Comment passer un tableau comme attribut d'un élément ?

Question

Je développe pour envoyer un tableau comme attribut d'élément.

Fichier form-list.html

<dom-module id="form-list">
  <template>
    <div>{{title}} - {{owner}} </div>
    <form>
      <template is="dom-repeat" items="{{inputAndLabel}}">
          <div><label>{{item.tag}} {{owner}}</label><input type="{{item.type}}" value="{{item.defaultValue}}"></div>
      </template>
    </form>
  </template>

  <script>
    Polymer({
      is: 'form-list',
      properties: {
        owner: {
          value:"Mechanical",
        },
        inputAndLabel: {
          type: Array,
          value: function() { return []; }
        }
      },
      ready: function() {
        this.title = 'Formulario: Usuario';
      }
    });
  </script>
</dom-module>

Ainsi, pour utiliser l'élément et passer la propriété inputAndLabel (c'est un Array) cela ne fonctionne pas, mais la propriété owner fonctionne (c'est une chaîne).

<form-list inputAndLabel="[
        {defaultValue: '', type:'text', tag: 'Nombre' },
        {defaultValue: '', type:'text', tag: 'Apellido' },
        {defaultValue: '', type:'text', tag: 'Email' },
        {defaultValue: '', type:'text', tag: 'Dirección' }]" owner="Eternal">
</form-list>

Comment envoyer un tableau comme propriété d'un élément personnalisé ?

Merci

Answer 1

Selon documentation sur les polymères vous pouvez passer un tableau comme attribut d'élément si vous respectez la notation JSON stricte.

Pour les propriétés de type objet et tableau, vous pouvez transmettre un objet ou un tableau au format JSON :

<my-element book='{ "title": "Persuasion", "author": "Austen" }'></my-element>

Notez que JSON nécessite des guillemets doubles, comme indiqué ci-dessus.

<form-list input-and-label='[
        {"defaultValue": "", "type":"text", "tag": "Nombre" },
        {"defaultValue": "", "type":"text", "tag": "Apellido" },
        {"defaultValue": "", "type":"text", "tag": "Email" },
        {"defaultValue": "", "type":"text", "tag": "Dirección" }]'   owner="Eternal">
</form-list>

Notez également que le attribut correspondant pour le inputAndLabel la propriété est écrite input-and-label .