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

Question

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

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

事实是，Font Awesome 图标 class 实际上是 3 classes。上面的图标是"fa fa-globe fa-2x"。我只想传递图标 class 名称的 "globe" 部分。这是元素的原始代码，减去样式，旨在实现此目的：

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

但是，使用上面的代码时图标没有出现，class也没有添加到object。

如果我通过以下代码在 ready 回调中添加 classes my self，一切正常。

<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}}"。绑定到 class 等原生属性时，语法要求您使用 $= (docs).

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

Why can't I assign an element's class via data binding?

html

javascript

data-binding

web-component

polymer