がクラスで使用するWebコンポーネントにパラメータを渡すと

を失敗した私は正常に動作polymer要素に次のコードを持っています。しかし、私は、パラメータに基づいてfont-awesomeアイコンを変更したいがクラスで使用するWebコンポーネントにパラメータを渡すと

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

。だから私はこれまで、その行に変更：

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

をそして私は、ポリマー要素に次のプロパティを追加しました：でも、別の値を渡そうとしてちょうどさせることなく、そのままそれを実行

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

それはデフォルトの'user'を使用し、正しくレンダリングされません。私は{{i}}はその後、それが"<i class='fa fa-" + self.icon + "'></i>"に似た計算値を返したが、それはリテラルテキストをレンダリングして全体<i>タグを交換するなど、いくつか他のものを、試してみた

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

：DOMは、ちょうどこの持っています。

私は間違っていますか？ネイティブの属性にプロパティをバインド

出典

2016-10-03 Scott Beeson

が必要ですPolymer's attribute-binding syntax（すなわち、class$="{{prop}}"）：

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

：私はPolymerready()関数に次のコードを追加してしまった

<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

うわー、1つの小さな '$'が問題を解決しました。回答と関連ドキュメントへのリンクをありがとう！ –

@Scott問題はありません – tony19

私はまだ他の/より良い答えを見たいです。

出典

2016-10-03 19:27:56

がクラスで使用するWebコンポーネントにパラメータを渡すと

答えて

関連する問題