ポリマーは新しい行の代わりに<br/>を表示します

Question

私はアドレスを表示するポリマー要素を作成しました。住所には新しい行のために\nが含まれていますので、それを<br/>に置き換えたいと思います。

これはテンプレートである：

<br/> 
    {{sanitizeAddress(address)}} 
<br/> 

これはsanitizeAddressためのコードである：

sanitizeAddress: function(unsanitizedAddress) { 
     var sanitizedAddr = unsanitizedAddress.replace("\n","<br/>"); 
     console.log("sanitizedAddr = " + sanitizedAddr); 
     return sanitizedAddr; 
} 

これは実際の出力である：

FIRSTLINE、< BR/> SecondLine

これは予想される出力です：

FIRSTLINE、
SecondLine

どのように私は<br/>が離れて行くと、新しい行を表示することができますか？

Answer 1

デフォルトでは、Polymerはバインディング内のHTMLコンテンツを自動的に編集し、望ましくないDOM変更を誤ってしまうことを防ぎます。それを行うための簡単な方法は、データが利用可能になったとき、あなたはそれをこのように挿入し、いくつかの要素にidを割り当てることです：

<dom-module id="my-element"> 
    <template> 
    <div id="addressContainer"></div> 
    </template> 
    <script> 
    Polymer({ 
     is: 'my-element', 
     properties: { 
     address: { 
      type: String, 
      observer: '_addressChanged' 
     } 
     }, 

     _addressChanged: function(newValue) { 
     this.$.addressContainer.innerHTML = newValue; 
     } 
    }); 
    </script> 
</dom-module> 

だけだけあなたが信頼HTMLのためにこれを行うに注意してください。