Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to pass an Array as element's Attribute?

I'm developing for sending an Array as element's attribute.

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

So, for using the element and pass the inputAndLabel propertie (it's an Array) that is not work, but the owner property works (it's a string).

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

How to send an array as custom element's property?

Thanks

like image 800
Eday Gonzalez Avatar asked Feb 18 '17 22:02

Eday Gonzalez


People also ask

How do you pass an array of elements in Javascript?

Method 1: Using the apply() method: The apply() method is used to call a function with the given arguments as an array or array-like object. It contains two parameters. The this value provides a call to the function and the arguments array contains the array of arguments to be passed.

Can we store array in data attribute?

You can use arrays and hashes in HTML5 data attributes. Use JSON. parse, and make sure you're using single quotes around the brackets and double quotes inside the brackets.


1 Answers

According to polymer documentation you can pass an array as an element attribute it you respect the strict JSON notation.

For object and array properties you can pass an object or array in JSON format:

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

Note that JSON requires double quotes, as shown above.

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

Also note that the corresponding attribute for the inputAndLabel property is written input-and-label.

like image 154
Supersharp Avatar answered Sep 22 '22 21:09

Supersharp