Question

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

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

问题是，Font Awesome Icon类实际上是3个类。上面的图标是＆＃34; fa fa-globe fa-2x＆＃34;。我只想通过＆＃34;地球仪＆＃34;图标类名称的一部分。这是元素的原始代码，减去样式，旨在实现此目的：

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

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

1 个答案: