傳遞參數Web組件在課堂上使用失敗

我有一個polymer元素下面的代碼工作正常：傳遞參數Web組件在課堂上使用失敗

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

不過，我想改變基於參數的font-awesome圖標。所以我改變該行這樣的：

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

然後添加以下屬性到聚合物元件：

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

運行原樣，甚至沒有試圖通過不同的值，只是讓它使用默認的'user'，它不能正確渲染。該DOM只是有這樣的：

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

我已經嘗試了一些其他的東西，包括{{i}}則具有返回類似"<i class='fa fa-" + self.icon + "'></i>"的計算值但呈現的文字文本替換整個<i>標籤。

我在做什麼錯？

來源

2016-10-03 Scott Beeson

結合性質與天然屬性需要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>

來源

2016-10-03 19:27:33 tony19

哇，一個小'$'修復了這個問題。感謝您的答案和相關文檔的鏈接！ –

@Scott沒問題 – tony19

我最終添加以下代碼到Polymerready()功能：

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

我仍然喜歡看到其他/更好的答案。

來源

2016-10-03 19:27:56

傳遞參數Web組件在課堂上使用失敗

回答

相關問題