Knockout.js and MVC

Question

Just started playing with knockout.Js which is a fantastic framework Steve's really done well with that one. One thing I can't seem to do at the minute is impliment it with my Html Helpers. So for exmaple I've got :

 <%: Html.TextBoxFor(model => model.Division) %>

but I'd line to use the databind on that but at the minute I cant get the "data-bind" attribute into the helper. I've used attributes before such as @class, Id etc but this one is tricky due to the - any Ideas.. Ive tried:

<%: Html.TextBoxFor(model => model.SupplierName, new { data-bind = "SupplierName"}) %>

and

 <%: Html.TextBoxFor(model => model.SupplierName, new { "data-bind"" = "SupplierName"}) %>

but no joy. we heavily use the Editor and Text box helpers and I'd really like to integrate these into the Item's with knock out..

Any help much appretiated

Answer 1

This should work:

<%: Html.TextBoxFor(model => model.SupplierName, new { data_bind = "SupplierName"}) %>

Variable names cannot contain a hyphen (-) but if you use an underscore (_) in an HTML attribute, it is automatically converted to a hyphen when its 'rendered'.

Answer 2

You can supply attributes either as anonymous object or as a dictionary. In this particular case a dictionary should be used:

<%: Html.TextBoxFor(m => m.SupplierName, new Dictionary<string, object> { { "data-bind", "SupplierName" } }) %>

Answer 3

I used Jim's answer as the base for my MVC 4 solution.

Jim's:

<%: Html.TextBoxFor(model => model.SupplierName, new { data_bind = "SupplierName"}) %>

Mine:

@Html.TextBoxFor(model => model.SupplierName, new { data_bind = "value: SupplierName" })

Answer 4

See Using Html.TextBoxFor with class and custom property (MVC) for how to do it in MVC3. Im using MVC2 so the above answer was spot on for me