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
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.
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.
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
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With