如何使用 Razor 和 Knockout 进行数据绑定答案

【问题标题】：How to data-bind with Razor and Knockout如何使用 Razor 和 Knockout 进行数据绑定
【发布时间】：2015-12-28 12:09:35
【问题描述】：

我正在尝试使用 Razor 设置 Knockout-bound 函数的参数。我试过了……

<a href="#" data-bind="click: function() { return myFunc(@Type.SomeType.ToString()); }">
    Click Me
</a>

和..

<a href="#" data-bind="click: function() { return myFunc(@Html.Raw(Type.SomeType.ToString())); }">
    Click Me
</a>

和..

<a href="#" data-bind="click: function() { return myFunc('@Html.Raw(Type.SomeType.ToString())'); }">
    Click Me
</a>

和..

<a href="#" data-bind="click: function() { return myFunc('@(Html.Raw(Type.SomeType.ToString()))'); }">
    Click Me
</a>

有没有正确的方法来做到这一点？

（背景：这是用于引导下拉菜单）

【问题讨论】：

第三个 sn-p 应该可以工作。错误是什么？
每个撇号上的未终止字符串常量。它没有连接两个撇号。如果我交换撇号和引号，也会出现同样的错误。
你试过myFunc('@(Html.Raw(Type.SomeType.ToString()))')吗？
这给出了同样的错误
我觉得用Razor渲染脚本真的很丑，不过看你自己

标签： razor knockout.js data-binding

【解决方案1】：

您可以尝试用单引号 (') 将 data-bind 属性括起来，并使用 Json.Encode 传递参数。

完整示例：

@{
    // A string with a lot of special characters
    string myStr = "abc\"\\/'#{}@.:xyz";
}

<span data-bind='click: function() { myFunc(@Json.Encode(myStr)); }'>
    Click Me
</span>

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-debug.js"></script>
<script>
    ko.applyBindings({
        myFunc: function (myParam) {
            console.log(myParam);
        }
    });
</script>

在你的情况下是：

<a href="#" data-bind='click: function() { return myFunc(@Json.Encode(Type.SomeType.ToString())); }'>
    Click Me
</a>

【讨论】：