web-dev-qa-db-ja.com

段落テキストでのKnockout.jsキャリッジリターン

Knockout.jsを使用して、段落<p>要素のtext属性にバインドされているテキストにキャリッジリターンを含めるにはどうすればよいですか。

私のViewModelで、ビューの<p>にバインドされたテキストの文字列を生成しました。ブラウザが改行で表示する文字列にキャリッジリターンを含めたいのですが。

文字列に<br />またはEnvironment.NewLineを含めると機能しないようです。

28
Martin

htmlバインディング を使用できます。

JS:

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

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

見る :

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

フィドルを参照

18
Damien

要素にcssプロパティを設定する必要があります。 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());

その後、コードは機能します。 \n

60
DevZer0