Knockout JSON data reloading issue with ASP.NET MVC

Question

I've loaded an ASP.NET MVC viewModel into KnockoutJS using ko.mapping.fromJS(Model).

My viewModel looks something like this:

public IEnumerable<FunkyThing>funkyThings;
public FunkyThing selectedFunkyThing;

Each FunkyThing has a string property funkyThingName. The mapping worked fine and I can see all the funky things in the table with their names.

I want to add a quick refresh button. So I've created a simple button and then data bound the buttons click to a knockout function refresh which looks something like this:

   model.refresh= function () {
            var url = '@Url.Action(MVC.FunkyThings.RefreshJSON())';
            $.getJSON(url, function (returnedData) {                
                ko.mapping.fromJS(returnedData, {}, model.funkyThings);
            });

The refresh function is succesfully called which in turn calls the RefreshJSON method on the server. The server passes back JSON data - an updated array of funkyThings, which I can see within chrome when I hover over returnedData in chrome's debugger.

However unfortunately after the mapping function has been called the bindings break:

Uncaught Error: Unable to parse bindings. Message: ReferenceError: funkyThingName is not defined; Bindings value: text: funkyThingName

And I'm not sure why...?

Can you include the code from the function that has the original get, as opposed to the refresh? — Rich
– Rich, Commented Mar 19, 2013 at 14:37

Paul Manzotti · Accepted Answer · 2013-03-19 13:51:02Z

1

Is model.funkyThings an observable? If it is, then you can try passing it into the mapping method as a function:

ko.mapping.fromJS(returnedData, {}, model.funkyThings());

Failing that, are you sure that the structure of the JSON returned by the refresh method is correct?

Ah, if you're getting a JSON string back, so you need to call the fromJSON method of the mapping plugin:

ko.mapping.fromJSON(returnedData, {}, model.funkyThings);

You might need the parenthesis on funkyThings here too, but try it without first.

answered Mar 19, 2013 at 13:51

Paul Manzotti

5,14523 silver badges28 bronze badges

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

6 Comments

Chris Nevill Over a year ago

Thanks. Using the parenthesis got rid of the exception. However no changes seem to be occurring. I've tried model.funkyThings.valueHasMutated(); however the list just stays the same

Paul Manzotti Over a year ago

Did you try the fromJSON method too?

Chris Nevill Over a year ago

I tried both. I'm fairly certain it's the fromJS one I want. I'm using on the C# side: public JsonResult RefreshJSON() { .... // refreshy stuff // return Json(viewModel.funkyThings, JsonRequestBehavior.AllowGet); } Everywhere else I've needed to use fromJS

Paul Manzotti Over a year ago

Can you post an example of the JSON you're getting back?

Chris Nevill Over a year ago

Your idea helped me sus it Paul. The original knockout model was created using the method here: aaron-powell.com/javascript/creating-vms-from-server This used camel case to produce the JSON. My method was using the MVC Json class and it wasn't producing camelcase. After changing the Server RefreshJSON to return camelcased JSON the issue was resolved. Thanks for your pointers!

|

dreamcrash · Accepted Answer · 2013-03-19 14:51:13Z

1

If the returned object is in the correct format and also the binding is well done you just need to do:

    model.FunkyThings(returnedData).

edited Mar 19, 2013 at 14:51

dreamcrash

52.6k26 gold badges114 silver badges138 bronze badges

answered Mar 19, 2013 at 14:33

Santiago Benitez

3622 silver badges12 bronze badges

1 Comment

Santiago Benitez Over a year ago

Considering that: Funky things is an observable array and the returned object is a collection of funky thing objects

Collectives™ on Stack Overflow

Knockout JSON data reloading issue with ASP.NET MVC

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related