How to enable data binding in KnockoutJS using the ASP.NET MVC 3 "Razor" View Engine?

Question

I'm trying to implement this Knockout example using ASP MVC 3's "Razor" view engine.

The first topic covers simple data binding of a C# array using the standard ASP view engine. I am trying the sample example using "Razor", and this line:

<script type="text/javascript"> 
    var initialData = <%= new JavaScriptSerializer().Serialize(Model) %>; 
</script>

results in an empty variable for initialData.

I also tried this:

@{
    string data = new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(Model);
}

And then specified the initialData like this:

var initialData = @Html.Raw(data);

This populates initialData with the dataset, but binding does not work.

I'm just trying to databind this set in order to display a count of the ideas, as in the example:

<p>You have asked for <span data-bind="text: gifts().length">&nbsp;</span> gift(s)</p>

Why isn't data binding working in this instance?

RP Niemeyer · Accepted Answer · 2011-05-03 20:12:53Z

24

The easiest way in MVC3 is to do:

var initialData = @Html.Raw(Json.Encode(Model));

answered May 3, 2011 at 20:12

RP Niemeyer

115k18 gold badges295 silver badges212 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

retrodrone Over a year ago

Thanks, @RP, but it doesn't work for me. I have this: <p>You have asked for <span data-bind="text: gifts().length"> </span> gift(s).</p> <script type="text/javascript"> var initialData = @Html.Raw(Json.Encode(Model)); var viewModel = { gifts: ko.ObservableArray(initialData) }; ko.applyBindings(viewModel); </script> The bindings don't show up for me.

RP Niemeyer Over a year ago

Can you do a "view source" in your browser and see how initialData looks in the markup? I have a copy of the gift editor sample that works with this code. Did you change anything else? Thanks.

retrodrone Over a year ago

Nothing out of the ordinary. initialData is just a regular JSON array populated with the correct data. I can throw up an alert box with the correct count, but the ko databinding isn't working. It's super frustrating because the live examples are superb.

RP Niemeyer Over a year ago

You can take a look at this: db.tt/5VYfoWz and try to reconcile it with yours.

retrodrone Over a year ago

Just FYI, my sample was breaking because I used the latest jQuery (1.5.1), jQuery template, and Knockout libs. I replaced all of that with @RP's example libs and it worked.

|

sjngm · Accepted Answer · 2011-09-03 19:00:36Z

11

I ran into this same problem, and discovered that it was my own stupidity that caused the issue (which it so often is). I forgot to wait until the DOM loaded to call ko.applyBindings(viewModel) - so simply using:

$(document).ready(function () { ko.applyBindings(viewModel); });

So the whole script as

<script type="text/javascript">
var initialData = @Html.Raw( new JavaScriptSerializer().Serialize(Model));
var viewModel = {
    gifts: ko.observableArray(initialData)
};

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

This worked with knockout-1.2.1.js and jquery-1.5.1.js

edited Sep 3, 2011 at 19:00

sjngm

13k16 gold badges90 silver badges118 bronze badges

answered Sep 3, 2011 at 2:01

El Kabong

7171 gold badge8 silver badges15 bronze badges

1 Comment

dotnetN00b Over a year ago

You just helped me solve a problem I was banging my head against for the last 2 days. Thank you.

Collectives™ on Stack Overflow

How to enable data binding in KnockoutJS using the ASP.NET MVC 3 "Razor" View Engine?

2 Answers 2

7 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related