为什么我不能通过数据绑定来分配元素的类？

Question

我正在创建一个自定义元素，该元素表示要放在我的个人网站上的联系媒体。该元素的一个工作示例如下所示：

想法是我可以将标题、值和 Font Awesome Icon 类作为字符串传递。

问题是，Font Awesome Icon 类实际上是 3 个类。上面的图标是“fa fa-globe fa-2x”。我只想传入图标类名的“地球”部分。这是元素的原始代码，减去样式，旨在完成此操作：

<template>
    <i class="{{fa_icon}}"></i>
    <div class="line"></div>
    <span class="title">{{title}}</span>
    <div class="line"></div>
    <span class="value">{{value}}</span>    
</template>
<script>
    Polymer({
        is: 'contact-tile',
        properties: {
            title: String,
            value: String,
            icon: String,
            fa_icon: {
                type: String,
                computed: 'generateIconClass(icon)'
            }
        },
        generateIconClass: function (icon) {
            return 'fa fa-' + icon + ' fa-2x';
        },
    });
</script>

但是，使用上述代码时，图标不显示，并且类未添加到对象中。

如果我通过下面的代码在ready 回调中添加我自己的类，一切正常。

<template>
    <i id="i"></i>
    <div class="line"></div>
    <span class="title">{{title}}</span>
    <div class="line"></div>
    <span class="value">{{value}}</span>    
</template>
<script>
    Polymer({
        is: 'contact-tile',
        properties: {
            title: String,
            value: String,
            icon: String,
            fa_icon: {
                type: String,
                computed: 'generateIconClass(icon)'
            }
        },
        generateIconClass: function (icon) {
            return 'fa fa-' + icon + ' fa-2x';
        },
        ready: function () {
            this.$.i.className += ' ' + this.fa_icon;
        }
    });
</script>

我应该期待这种行为吗？如果有，为什么？

Answer 1

使用class$="{{fa_icon}}"。绑定到类等原生属性时，语法要求您使用 $= (docs)。