段落文本中的 Knockout.js 回车

Posted 2023-02-16

【中文标题】段落文本中的 Knockout.js 回车

【英文标题】：Knockout.js carraige return in paragraph text

【发布时间】：2013-06-29 15:52:52

【问题描述】：

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

在我的 ViewModel 中，我生成了一个文本字符串，该字符串绑定到视图中的 <p>。我想在浏览器用换行符显示的字符串中包含回车符。

在字符串中包含<br /> 或Environment.NewLine 似乎不起作用。

【参考方案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

【讨论】：

我认为这个解决方案要好得多，因为 javascript 中没有特定于 html 的 html 字符。

绝对是一个更好的解决方案，尤其是在数据是用户编辑的数据的情况下，HTML 解决方案需要使用所见即所得的编辑器，这是完全没有必要的

【参考方案2】：

您可以使用html binding。

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>

See fiddle

【讨论】：

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

谢谢，data-bind="html: ..." 对我有用