将路径附加到图标 - Google Polymer

Question

在我的项目中，我绑定了 JSON 数组中的 'paper-fab' 元素列表。我只想提供图标的名称，而不是完整路径，以便与 'src' 属性或 'paper-fab' 绑定。我怎样才能做到这一点？是否可以使用计算的属性来实现？提前致谢。

代码段和JSON格式如下。

<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结构如下

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

Answer 1

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

您应该能够将 item.iconSrc 传递给您计算以将路径附加到图标

将路径附加到图标 - Google Polymer

Append path to icon - Google Polymer

polymer

polymer-1.0