polymerpolymer-1.0

Append path to icon - Google Polymer


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",
        }
]

Solution

  • 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