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

This has proven to be a bit long winded so I'm thinking HtmlHelpers, Is there any available or could this be my first worthwhile attempt at an OS project of my own? — Andy Allison, Nov 10 '10 at 16:12

score 32 · Accepted Answer · answered Dec 21 '11 at 13:28

32

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

answered Dec 21 '11 at 13:28

Tim

7,746
3
49
83

5

the expression should be new { data_bind = "value: SupplierName" } – Quango Jul 20 '12 at 12:27
Is that for MVC 4, or was I mistaken for MVC 3 too? – Tim Jul 22 '12 at 21:51

score 16 · Answer 2 · answered Nov 09 '10 at 10:22

16

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" } }) %>

answered Nov 09 '10 at 10:22

Robert Koritnik

103,639
52
277
404

Cheers Robert, I'd just got to that. One Gotcha was the "SupplierName" needs to be "value: SupplierName".. Thanks ;) – Andy Allison Nov 09 '10 at 11:02
Well. Attribute values can be anything... even `value:SupplierName`. ;) Cheers. – Robert Koritnik Nov 09 '10 at 11:07
agrred it was the value: PropertyName that i'd missed just having PropertName didn't seem to work? Also need to add the valueUpdate attribute or it doesn't seem to update my underlying value for some reason.? – Andy Allison Nov 10 '10 at 16:10
@Anyroo: I don't the library you're using but since it automates much of the form processing I suppose these are its particularities that you have to obey. Check their documentation for the settings you have to apply. – Robert Koritnik Nov 11 '10 at 06:26
1

You can also put underscore instead of dash, HtmlHelper renders that correctly `@Html.TextBoxFor(m => m.Name, new { data_bind = "value: name" })` at least in MVC 3, not sure about 2 – Ingó Vals Nov 07 '11 at 15:43
@IngóVals: Why would one want to put underscores, when KnockoutJS doesn't understand `data_bind`? One has to use dash to make it work. – Robert Koritnik Nov 07 '11 at 17:23
@Robert In MVC 3 at least (not sure about MVC 2) the htmlhelper will render data_bind as data-bind. – Ingó Vals Nov 07 '11 at 17:56

score 3 · Answer 3 · edited Apr 25 '12 at 20:37

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" })

edited Apr 25 '12 at 20:37

Sergey Glotov

20,200
11
84
98

answered Apr 25 '12 at 19:29

Eric Sean Moore

31
3

score 1 · Answer 4 · edited May 23 '17 at 12:14

1

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

edited May 23 '17 at 12:14

Community

1
1

answered Oct 28 '11 at 10:28

Rob

1,407
2
15
22

Thanks for that it's a nice syntax. – Andy Allison Nov 01 '11 at 08:36

Knockout.js and MVC

4 Answers4