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