如何将数组作为元素的属性传递?

时间:2017-02-18 22:46:36

标签: javascript polymer polymer-1.0 custom-element

我正在开发用于发送数组作为元素的属性。

文件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>
&#13;
&#13;
&#13;

因此,使用元素并传递inputAndLabel属性(它的数组)不起作用,但所有者属性有效(它是一个字符串)。

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

如何将数组作为自定义元素的属性发送?

由于

1 个答案:

答案 0 :(得分:4)

根据polymer documentation,你可以将一个数组作为元素属性传递,你尊重严格的JSON符号。

  

对于对象和数组属性,您可以以JSON格式传递对象或数组:

     

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

     

请注意,JSON需要双引号,如上所示。

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

另请注意,inputAndLabel属性的corresponding attribute已写为input-and-label