javascript - 如何从查询参数填充可观察值？

Question

我正在编写 ASP.NET/MVC 应用程序。我需要用通过 URL 传递的值填充 Knockout 可观察值。比方说，我想打开以下页面:

http://example.com/Controller/Action?param=test

我想把通过URL参数传递的值放入输入:

<input data-bind="value: field, <?>"></input> <!-- Either set value to "test" here -->

this.field = ko.observable(<?>) <!-- or here -->

解决方案1

由于我可以完全控制生成 HTML，因此我可以创建隐藏字段，用值填充它，然后使用 jQuery 来实现可观察，但这对我来说似乎有点过分了。

<input type="hidden" id="temp" value="@Model.Param"></input>

field($("#temp").val());

解决方案2

另一种选择是使用 Razor 生成一些 Javascript:

<script type="text/javascript" src="pageViewModel.js"></script>
<script type="text/javascript">
    pageViewModel.setValue(@Model.Param); // Dangerous
</script>

但这很危险 - 我会应用一些安全措施来避免人们在这里注入(inject) Javascript。

有更好的方法吗？

Answer 1

您可以通过检查 window.location.search How to obtaining the querystring from the current URL with JavaScript? 在您的 knockout View 模型中直接通过 javascript 访问查询字符串。

var searchParams = new URLSearchParams(window.location.search);
this.field = ko.observable(searchParams.get("param"));

(如果不支持 URLSearchParams，链接的 SO 答案还提供了旧版浏览器支持的解决方案)