How to data-bind with Razor and Knockout - razor

Question

I'm trying to set a Knockout-bound function's parameter with Razor. I've tried...
<a href="#" data-bind="click: function() { return myFunc(#Type.SomeType.ToString()); }">
Click Me
</a>
and..
<a href="#" data-bind="click: function() { return myFunc(#Html.Raw(Type.SomeType.ToString())); }">
Click Me
</a>
and..
<a href="#" data-bind="click: function() { return myFunc('#Html.Raw(Type.SomeType.ToString())'); }">
Click Me
</a>
and..
<a href="#" data-bind="click: function() { return myFunc('#(Html.Raw(Type.SomeType.ToString()))'); }">
Click Me
</a>
Is there a right way to do this?
(Background: this is for use in a bootstrap dropdown)

Answer 1

You can try to surround data-bind attribute with single quotes (') and pass the parameter using Json.Encode.
Full example:
#{
// 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>
In your case it would be:
<a href="#" data-bind='click: function() { return myFunc(#Json.Encode(Type.SomeType.ToString())); }'>
Click Me
</a>