CODEWITHSUNDEEP
asp.net-mvcknockout.js
Alex Barac
Alex Barac

Reputation: 633

Knockout simple object mapping

I have a simple MVC Model like this : 

public class User
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string MobileNumber { get; set; }
    public string EmailAddress { get; set; }
}

I would like to map one object of this type inside a knockout viewmodel in order to populate it: 

var UserViewModel = function () {
    var self = this;
    self.user = ko.mapping.fromJS({});
    $.getJSON("/UserManagement/CreateEmptyUser", function (data) {
        ko.mapping.fromJS(data, self.user);
    });
    self.createUser = function (data, eventArgs) {
        var user = data;
        $.ajax({
            type: "post",
            contentType: "application/json",
            data: ko.toJSON(user),
            url: "@Url.Action("CreateUser")",
            success: function () {
                window.location = "@Url.Action("AddNew")";
            }
        });
    };
};

The problem I am having is that I have no clue how to map any single object. I've tried using 

self.user = ko.mapping.fromJS([]);
$.getJSON("/UserManagement/CreateEmptyUser", function (data) {
        ko.mapping.fromJS(data,{}, self.user);
    });

which is being used for arrays and trying to extract the element at index 0, the other solution I thought would work is the one in the 2nd comment block. Everything I found on google led me to mapping entire arrays, but nothing towards simple object mapping. Is there a proper way to do this? I would like to keep the model separated and not manually describe its properties in javascript.

Thanks, Alex Barac

Upvotes: 1

Views: 566

Answers (3)

Peter Kerr
Peter Kerr

Reputation: 1739

If your viewModel in question needs to be an observable itself, then I found that use the mapping to return an observable array as the OP mentioned, and then returning the first item in that array works. This is also useful for return one object in ajax that you then wish to push onto an existing observableArray. I have a helper function for this:

koMappingUsingArray = function (jsObject, mapping) {
    var observableObjectArray = ko.observableArray();
    var objectArray = new Array(jsObject);
    ko.mapping.fromJS(objectArray, mapping, observableObjectArray);

    return observableObjectArray()[0];
};

and then call it such as:

    self.myObject = ko.observable();

    $.ajax({
        type: "POST",
        url: "....",
        data: ko.mapping.toJSON(???),
        contentType: "application/json; charset=utf-8",
        success: function (returnedObject) {
            self.myObject (koMappingUsingArray(returnedObject));
        });

Upvotes: 0

Alex Barac
Alex Barac

Reputation: 633

I kept working and checking this and I found the solution I wanted at the beginning. The idea is using @Paul Manzotti 's suggestion, 

self.user;
$.getJSON("/UserManagement/CreateEmptyUser", function (data) {
    self.user = ko.mapping.fromJS(data);
}

but replacing the self.user; with self.user={}; and 

self.user = ko.mapping.fromJS(data)

with

ko.mapping.fromJS(data,{},self.user);

If using this, there is no need to manually declare every object's property in the viewmodel. Hope this will be of use to those that stumble upon the same issue.

Upvotes: 0

Paul Manzotti
Paul Manzotti

Reputation: 5147

I think your problem is that you are using the mapping from method to instantiate your view model, which will give it no properties, so when you try to map the data after your JSON call, there are no properties on self.user to populate. Either create your user object with the properties you want on there, or else use mapping.fromJS to create your viewmodel in the first place:

self.user = { FirstName: ko.observable(''), etc... }

and leave your mapping line as it is, or

self.user;
$.getJSON("/UserManagement/CreateEmptyUser", function (data) {
    self.user = ko.mapping.fromJS(data);
}

Upvotes: 3

Related Questions