Polymer zeigt <br/> anstelle einer neuen Zeile an

Question

Ich habe ein Polymer-Element erstellt, das eine Adresse anzeigt. Die Adresse enthält \n für neue Zeilen, also wollte ich es durch <br/> ersetzen.

Dies ist die Vorlage:

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

Dies ist der Code für sanitizeAddress:

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

Dies ist die tatsächliche Ausgabe:

First, < br/> Zweitlinien

Dies ist die erwartete Ausgabe:

Firstline,
Zweitlinien

Wie kann ich die <br/> gehen und weg eine neue Zeile angezeigt werden?

Answer 1

In der Standardeinstellung zeigt Polymer automatisch HTML-Inhalt in Ihren Bindungen, um zu verhindern, dass Sie versehentlich mit DOM-Änderungen enden, die Sie nicht möchten. Eine einfache Möglichkeit, es zu tun ist, dann ein id zu einem Element zugeordnet werden, wenn die Daten verfügbar sind Sie es auf diese Weise einfügen:

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

Nur vorsichtig sein, nur das für HTML tun, denen Sie vertrauen.