Knockout.js Carraige restituire nel paragrafo testo

Question

Utilizzando knockout.js, come includere un ritorno a capo nel testo associato all'attributo di testo di un elemento di paragrafo <p>.

Nel mio ViewModel ho generato una stringa di testo associata a <p> nella vista. Voglio includere i ritorni a capo nella stringa che il browser visualizza con le interruzioni di riga.

Includere <br /> o Environment.NewLine nella stringa non sembra funzionare.

Answer 1

È possibile utilizzare html binding.

JS:

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

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

Vista:

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

See fiddle

Answer 2

È necessario impostare una proprietà css nel proprio elemento. 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()); 

Quindi il codice funziona. con \n

Answer 3

Si potrebbe anche usare campate per ottenere i vostri attacchi e poi il codice HTML sarà come al solito.

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