Knockout设置允许html的输入字段的初始值

时间:2013-11-28 19:58:11

标签: asp.net-mvc-3 entity-framework data-binding knockout.js

我有两个输入字段名字和姓氏。 应用程序运行得很好。 突然有人从火星进来并在那些输入字段中输入这样的东西

*(~'@@~>?<+!""*%$)!

用于名字和姓氏。现在不要问我为什么他在火星上做这个原因这很常见。你可以试试这个小提琴

http://jsfiddle.net/farrukhsubhani/3RjRF/

然后这个文本进入我的数据库,现在当我检索它时,它就像这样回来了

*(~&#39;@@~&gt;?&lt;+!&quot;&quot;*%$) 这对我来说是好的,因为它的html我可以把它放回到淘汰赛中,它会被填充为html,你可以在上面的小提琴中看到它。然而,这个火星人然后认为在地球上这不是一个好名字所以他试图编辑领域。

上面的小提琴是一种编辑页面,它显示了他在底部的旧值和顶部的两个字段。他不知道HTML,所以他认为我们已经在输入字段中更改了他的名字,但我需要知道

将文本传递给knockout以给输入字段赋予初始值时,可以告诉它将此文本视为html,以便在输入字段中正确呈现

另一种方法是将他发送到http://www.w3schools.com/tags/ref_entities.asp并告诉他有关保留HTML字符的信息。此信息已存储在数据库中(使用Entity Framework简单的person.fname和person.lname都具有属性AllowHTML)所以在我的小提琴上我刚刚将它放在两个变量中,您可以看到实际文本框与下面的html有何不同。如果我不使用Knockout绑定,那么这些框中会显示实际文本,用户可以毫无问题地编辑<>'个标记。

任何人在离开我们的星球之前都有解决方案。这可以改变我们星球上的外星生命。

更新 如果我进入此字段并粘贴(~'@@~>?<+!""*%$)"绑定工作正常,您可以将其复制并粘贴到小提琴中以查看它。然而,它没有从Javascript变量中获取该值以使其成为字符串,并且输入字段中未正确显示html特殊字符。

我们在没有Knockout的情况下做了另一个测试,当你尝试编辑它时,这个文本会在字段中呈现。

我们更新了JSfiddle,在没有JQuery的情况下工作,如果将它存储在js变量中并且不给输入字段赋值,那么它的结果相同

http://jsfiddle.net/farrukhsubhani/3RjRF/3/

如果我们为输入字段赋值并只使用jQuery填充全名,那么它可以正常工作

http://jsfiddle.net/farrukhsubhani/3RjRF/4/

最后一个小提琴是一个工作示例,我们希望Knockout能够完成JQuery正在做的事情。

我认为接下来的问题是如何将这个文本存储在javascript变量中并作为html文本放入输入字段中,以便特殊字符显示为未转义。您可以尝试使用不适用于我们的jsfiddle进行unescape。

2 个答案:

答案 0 :(得分:0)

在进入(或可能不在)数据库的某个地方,该值正在进行HTML转义。它不是Knockout本身就是这么做的。你需要追踪那个位置,但你不能只是禁用它;你将不得不用清理结果的东西替换它,否则你就会打开跨站点脚本攻击(插入输入的外部源中的任何<script>都可以完全访问你的数据)。

每当你看到html:绑定使用时,警告铃声就会消失在你的头脑中你应该非常仔细地检查以确保没有原始的,未经审查的用户输入的可能性使其成为获得的字符串显示。

答案 1 :(得分:0)

好的,这就是我最后所做的事情

http://jsfiddle.net/farrukhsubhani/3RjRF/7/

我做了以下事情:

  1. 我在输入字段中添加了value属性,并将输入文本从服务器放入其中。因为我在MVC中使用TextBoxFor,所以我就这样做了。
  2. 在我应用knockout绑定之前,我已经使用$('#kfname')选择了这个值并将其传递给实际绑定,因此它使用了来自服务器的值。之前它像(@Model.fname,@Model.lname)
  3. 一样被传递

    我认为这样做允许jQuery获取值并将其分配给绑定而不是变量

    ko.applyBindings(new ViewModel($("#kfname").val(), $("#klname").val()));

    希望这可以帮助使用淘汰赛的人。