Knockout.js中段落文本的换行

Question

使用 knockout.js，如何在绑定到段落<p>元素的文本属性的文本中包含换行符。

在我的ViewModel中，我生成了一个文本字符串，该字符串与View中的<p>元素绑定。我想在字符串中包含换行符，以便浏览器显示换行。但是，在字符串中包含<br />或Environment.NewLine似乎不起作用。

- Martin

Answer 1

您需要在元素中设置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

- DevZer0

---

我认为这个解决方案更好，因为在 JavaScript 中没有特定于 HTML 的 HTML 字符。 - Samuel

绝对是更好的解决方案，特别是在数据经常由用户编辑时，HTML 方案需要使用所谓的所见即所得编辑器，这完全是不必要的。 - squarelogic.hayden

Answer 2

你可以使用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>

查看示例

- Damien

---

如果您要这样做，请确保对尚未进行HTML编码的任何内容进行编码。 - bdukes

谢谢，data-bind="html: ..." 这个东西对我很有帮助。 - SeanMC