In my project I'm binding a list of 'paper-fab' elements from a JSON array. I want to give only the name of the icon instead of the full path to bind with 'src' property of 'paper-fab'. How can I achieve this? Is it possible to do it with computed property? Thanks in advance.
The code snippet and JSON format is given below.
<ul id="actionButtons">
<template is="dom-repeat" items="[[plugins]]">
<li>
<span>
<paper-fab mini src="[[item.iconSrc]]" id="[[item.id]]" name="[[item.name]]" class$="[[item.cssClass]]"> </paper-fab>
</span>
</li>
</template> </ul>
JSON structure is given below
plugins:
[
{
"id": 1,
"name": "Image_1",
"iconSrc": "app/images/icons/pacs_pull.png",
"cssClass": "white"
},
{
"id": 2,
"name": "Image_2",
"iconSrc": "app/images/icons/pacs_push.png",
"cssClass": "grey"
},
{
"id": 3,
"name": "Image_3",
"iconSrc": "app/images/icons/fileBrowser.png",
"cssClass": "white",
}
]
Check out Computed bindings
<template>
My name is <span>{{computeFullName(first, last)}}</span>
</template>
<script>
Polymer({
is: 'x-custom',
properties: {
first: String,
last: String
},
computeFullName: function(first, last) {
return first + ' ' + last;
}
...
});
</script>
</dom-module>
You should be able to pass item.iconSrc
to you compute to append the path to the icon