Wie übergibt man ein Array als Elementeigenschaft?

Question

Ich entwickle für das Senden eines Arrays als Element-Eigenschaft.

Datei-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>

Also, für das Element mit und übergeben Sie die inputAndLabel propertie (es ist ein Array), die nicht funktionieren wird, aber die Eigentümer Eigentum Werke (es ist eine Zeichenfolge).

<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> 

Wie wird ein Array als Eigenschaft eines benutzerdefinierten Elements gesendet?

Dank

Answer 1

polymer documentation Nach Sie ein Array als ein Element passieren kann es Attribut Sie die strenge JSON Notation respektieren.

Für Objekt und Array-Eigenschaften Sie ein Objekt oder ein Array im JSON-Format passieren kann:

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

Beachten Sie, dass JSON erfordert doppelte Anführungszeichen, wie oben gezeigt.

<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> 

Beachten Sie auch, dass die corresponding attribute für die inputAndLabel Eigenschaft input-and-label geschrieben.