将参数传递给 Web 组件以在 class 中使用失败

Question

我在 polymer 元素中有以下代码可以正常工作：

<i class="fa fa-user"></i>

但是，我想根据参数更改 font-awesome 图标。所以我将该行更改为：

<i class="fa fa-{{icon}}"></i>

然后我将以下属性添加到 Polymer 元素中：

icon: {
    type: String,
    value: 'user'
}

运行它原样，甚至没有尝试传递不同的值，只是让它使用默认值 'user'，它无法正确呈现。 DOM 只有这个：

<i class="style-scope widget-iconblock"></i>

我尝试了其他一些方法，包括用 {{i}} 替换整个 <i> 标签，然后让 return 计算出类似于 "<i class='fa fa-" + self.icon + "'></i>" 的值，但是渲染了文字。

我做错了什么？

Answer 1

将属性绑定到本机属性需要 Polymer's attribute-binding syntax（即 class$="{{prop}}"）：

<head>
  <base href="https://polygit.org/polymer+1.7.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <i class$="fa fa-{{icon}}"></i>
    </template>
    <script>
    HTMLImports.whenReady(function() {
      Polymer({
        is: 'x-foo',
        properties : {
          icon: {
            type: String,
            value: 'user'
          }
        }
      });
    });
    </script>
  </dom-module>
</body>

Answer 2

我最终将以下代码添加到 Polymer ready() 函数中：

$('#myelement').append("<i class='fa fa-" + self.icon + "'></i>");

我仍然希望看到 other/better 答案。

将参数传递给 Web 组件以在 class 中使用失败

Passing parameter to web component to use in class fails

javascript

css

font-awesome

polymer