Knockout.js Rückgabe in Absatztext

Question

Verwenden Sie knockout.js, wie schließe ich einen Wagenrücklauf in dem Text ein, der an das Textattribut eines Absatzelements <p> gebunden ist.

In meinem ViewModel habe ich eine Textzeichenfolge generiert, die an die <p> in der Ansicht gebunden ist. Ich möchte Wagenrücklauf in die Zeichenfolge einschließen, die der Browser mit den Zeilenumbrüchen anzeigt.

Einschließlich <br /> oder Environment.NewLine in der Zeichenfolge scheint nicht zu funktionieren.

Answer 1

Sie können die html binding verwenden.

JS:

function AppViewModel() { 
    this.firstName = "Bert<br\>Test"; 
    this.lastName = "Bertington"; 
} 

// Activates knockout.js 
ko.applyBindings(new AppViewModel()); 

Ausblick:

<p>First name: <strong data-bind="html: firstName">todo</strong></p> 
<p>Last name: <strong>todo</strong></p> 

See fiddle

Answer 2

Sie müssen eine CSS-Eigenschaft in Ihrem Element festlegen. white-space: pre-wrap

<p style="white-space: pre-wrap">First name: <strong data-bind="text: firstName">todo</strong></p> 
<p>Last name: <strong>todo</strong></p> 

function AppViewModel() { 
    this.firstName = "Bert" + " \n " + "Test"; 
    this.lastName = "Bertington"; 
} 

// Activates knockout.js 
ko.applyBindings(new AppViewModel()); 

Dann funktioniert der Code. mit \n

Answer 3

Sie könnten Spannweiten auch benutzen, um Ihre Bindungen zu bekommen und dann wird das html wie gewohnt sein.

<span data-bind="text: firstName"></span><br /><span data-bind="text: lastName"></span>