淘汰文本区域值绑定显示换行符的 ASCII 字符？

Posted 2023-03-27

【中文标题】淘汰文本区域值绑定显示换行符的 ASCII 字符？

【英文标题】：knockout textarea value binding shows ASCII characters for line breaks?

【发布时间】：2019-09-15 04:33:51

【问题描述】：

我有一个像这样绑定文本区域的淘汰赛值：

<textarea class="form-control" data-bind="value: test" name="test" rows="4"></textarea>

但是，当保存带有换行符或额外空格的数据时，下次查看页面时，它会以 ASCII 字符显示它。像这样：

Overview being explained here in this box.

Test stuff test stuff.

当我查看数据库中的值时，它没有这些字符：

在此框中解释了概述。

测试东西测试东西。

事实上，即使在数据传递到视图之前的视图模型中，一切看起来都是正确的：

Overview being explained here in this box.\n\nTest stuff test stuff.

最后，即使在第一次输入时，剔除属性pageModel().test() 也会显示如下文本：

“在此框中解释了概述。

测试东西测试东西。”

那么为什么knout最终会用ASCII字符来渲染呢？当值已经输入时，我的 KO 模型如下所示：

self.test = ko.observable('Overview being explained here in this box.

Test stuff test stuff.');

好吧，那就是 MVC 问题，因为我这样称呼它：

self.test = ko.observable('@Model.Test');

但我不知道如何让它工作，如果我使用 html.Raw 换行符被正确解释，但是这会破坏 javascript 中断，因为行之间有一个空格，没有正确的字符串结尾。

我也尝试转义 \r\n 字符：

self.test = ko.observable('Overview being explained here in this box.\\n\\nTest stuff test stuff.');

虽然这并不能解决问题，但我仍然得到双倍的
。

我怎么能在仍然使用值绑定的同时让它正常工作？因为我使用的是 knockout.validation，我可以通过使用 html 绑定并使用轻微的 hack 来完成这项工作：

<textarea class="form-control" data-bind="value: test, event:  keyup: function(data, event)  data.test(event.target.value);  " name="test" rows="2"></textarea>

但这完全破坏了任何文本区域的淘汰赛验证，因为 html 是一种未经验证的单向绑定。所以我仍然需要使用值绑定。

如何让它工作？

【参考方案1】：

你可能正在寻找

self.test = ko.observable('@HttpUtility.JavaScriptStringEncode(ViewBag.Test)');

或者正如您为 .NET Core 指出的那样，您需要

@(JavaScriptEncoder.Default.Encode(question.Test))

【讨论】：

我使用的是 NET CORE，所以这不起作用，但 @(JavaScriptEncoder.Default.Encode(question.Test)) 确实如此。请更新您的答案以包含该内容，但感谢您为我指明正确的方向。