web-dev-qa-db-fra.com

Knockout.js retour chariot dans le texte du paragraphe

À l'aide de knockout.js, comment inclure un retour à la ligne dans le texte lié à l'attribut text d'un élément paragraphe <p>. 

Dans mon ViewModel, j'ai généré une chaîne de texte liée au <p> dans la vue. Je souhaite inclure les retours à la ligne dans la chaîne que le navigateur affiche avec les sauts de ligne. 

L'inclusion de <br /> ou Environment.NewLine dans la chaîne ne semble pas fonctionner.

knockout.jscarriage-returnparagraph
28
Martin

Vous pouvez utiliser la liaison html .

JS:

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

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

Vue :

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

Voir violon

18
Damien

Vous devez définir une propriété css dans votre élément. 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());

Ensuite, le code fonctionne. avec \n

59
DevZer0

Vous pouvez également utiliser des étendues pour obtenir vos liaisons, puis le code HTML sera comme d'habitude.

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