如何从查询参数中填充 observable？答案

【问题标题】：How to fill observable from query parameter?如何从查询参数中填充 observable？
【发布时间】：2018-03-03 04:06:09
【问题描述】：

我正在编写 ASP.NET/MVC 应用程序。我需要用通过 URL 传递的值填充可观察到的淘汰赛。例如，假设我要打开以下页面：

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 获取 observable，但这对我来说似乎有点过头了。

<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>

但这很危险 - 我会采取一些安全措施来避免人们在这里注入 Javascript。

有没有更好的方法？

【问题讨论】：

标签： javascript jquery asp.net asp.net-mvc knockout.js

【解决方案1】：

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

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

（如果 URLSearchParams 不支持，链接的 SO 答案也有旧版浏览器支持的解决方案）

【讨论】：

【解决方案2】：

我更喜欢 Jason Spake 的回答，但在我工作的地方，我们就是这样做的……

我们有一个效用函数

// this is a utility function that returns query string values. Pass in the
// name of the query string and the value is returned
function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function (m, key, value) {
        vars[key] = value;
    });
    return vars;
}

那我们就这样称呼它

this.HazInd = ko.observable(getUrlVars()["HazInd"]);

【讨论】：