CODEWITHSUNDEEP
asp.net-mvcjsonknockout.js
Chris Nevill
Chris Nevill

Reputation: 6151

Knockout JSON data reloading issue with ASP.NET MVC

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

Upvotes: 0

Views: 386

Answers (2)

Santiago Benitez
Santiago Benitez

Reputation: 362

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

    model.FunkyThings(returnedData).

Upvotes: 1

Paul Manzotti
Paul Manzotti

Reputation: 5147

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.

Upvotes: 1

Related Questions