将参数传递给我的 Knockout ViewModel

Question

我有一个使用 Knockout JS 的 MVC 站点。基本上，MVC 处理到几个不同页面的路由，每个页面都有一个视图模型。

其中一个页面需要一个参数来过滤数据。该页面的 MVC 控制器代码如下：

public ActionResult Transactions(int policyId)
{
    ViewData["policyId"] = policyId;
    return View();
}

该页面的视图包含一个隐藏字段。

<input type="hidden" name="hldPolicy" value="@ViewData["policyId"]">

然后在页面的html之后，

@section scripts
{
    @Scripts.Render("~/bundles/myBundle")
    <script>

        $(document).ready(function () {
            var policyId = $('#hldPolicy').val();
            var transactionViewModel = new TransactionViewModel(policyId);
            ko.applyBindings(transactionViewModel);
        });

    </script>
}

问题是这不起作用，因为脚本运行时隐藏字段未定义。这对我来说没有意义，因为我认为这就是 $(document).ready 所要防止的。我在这里做错了什么？有没有更好的方法将参数从 URL 参数传递到视图模型？

Answer 1

你可以这样使用它。在这里，您实际上不必传递参数，而是定义一个函数，该函数将在视图模型初始化时调用并根据您的要求获取数据。

@section scripts
{
    @Scripts.Render("~/bundles/myBundle")
    <script type="text/javascript">
        function TransactionViewModel(){
            var self = this
            self.SomeProperty = ko.observable()

            self.LoadData = function(){
                var policyId = $('#hldPolicy').val();
                self.SomeProperty(policyId)
            }
            self.LoadData()
        }

        $(document).ready(function () {
            ko.applyBindings(new TransactionViewModel());
        });
    </script>
}

当淘汰模型初始化时，它会自动调用self.LoadData()。

编辑

我发现您在输入时缺少 id 属性

<input type="hidden" id="hldPolicy" name="hldPolicy" value="@ViewData["policyId"]">

现在它应该可以正常工作了。

编辑：

你也可以这样做

@section scripts
{
    @Scripts.Render("~/bundles/myBundle")
    <script type="text/javascript">
        function TransactionViewModel(policyId){
            var self = this
            self.SomeProperty = ko.observable()

            self.LoadData = function(policyId){
                self.SomeProperty(policyId)
            }
            self.LoadData(policyId);
        }

        $(document).ready(function () {
            var policyId = $('#hldPolicy').val();
            ko.applyBindings(new TransactionViewModel(policyId));
        });
    </script>
}