Knockout.js carraige return in Absatz text

Verwenden knockout.js, wie füge ich einen Zeilenumbruch in den text ein, der gebunden ist, um das text-Attribut eines Absatzes <p> element.

In meinem ViewModel ich generiert eine Zeichenfolge von text, ist gebunden an die <p> im Blick. Ich möchte Zeilenumbrüche in der Zeichenkette, die der browser anzeigt, mit der Zeilenumbrüche.

Einschließlich <br /> oder Environment.NewLine im string nicht zu funktionieren scheint.

InformationsquelleAutor Martin | 2013-07-02
  1. 18

    Können Sie die html-Bindung.

    JS:

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

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

    Anzeigen :

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

    Siehe fiddle

    • wenn du gehst, um dies zu tun, stellen Sie sicher, codieren alle Inhalte, die nicht bereits HTML-codiert
    • Dank der data-bind="html: ..." ist, was hat es für mich
    InformationsquelleAutor Damien
  2. 60

    Müssen Sie eine css-Eigenschaft in Ihrem element. 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());

    Funktioniert der code. mit \n

    • Ich glaube, diese Lösung ist viel besser, weil es keine html-Zeichen zu html im javascript.
    • Definitiv eine bessere Lösung, vor allem, wo die Daten der Benutzer bearbeitet die Daten, die HTML-Lösung würde erfordern den Einsatz eines WYSIWYG-editor, der vollkommen unnötig ist
    • ich danke Ihnen sehr!
    InformationsquelleAutor DevZer0
  3. -1

    Konnte man auch mit Spannweiten um Ihre Bindungen und dann wird der html-Code wie gewohnt.

    <span data-bind="text: firstName"></span><br /><span data-bind="text: lastName"></span>
    InformationsquelleAutor Marius
Schreibe einen Kommentar