anatomy of KnockoutJs and JSON data models

Question

I've started exploring KnockoutJS just to see if i can use it with my ASP.NET MVC app. and there are many gray areas that i'm trying to figure out. I must admit its more because of my poor understanding regarding JSON in general and if i'm not wrong then it might also be because of the ASP.NET JSON format in particular or I'm totally wrong either way i need the answers.

I just want to know How to replicate data model that ASP.NET MVC returns via $.get. via JavaScript model.

one simple objects
nested/complex objects

Code:

list = ko.observableArray([]);
ko.applyBindings(list);

function loadTeamMembers(projectId) {
    $.ajax({
        type: "GET",
        url: "/Project/GetTeamMembers?projectId=" + projectId,

        success: function (data) {

            $(data).each(function (index, item) {
                list.push(item);
            });
        }
    });
}

loadTeamMembers(6);

I used the code above on my table where I have data-bound this with the Knockout list (which works). What about adding/deleting new items to/from the list? I expect I would need a JavaScript model on the client side. How exactly should I create the JavaScript model (looking for two aforementioned examples) on the client so it works with ASP.NET MVC JSON data?

Any info or links will be much appreciated.

there is no `asp.net json format` . JSON is JSON regardless of source and has it's own format rules — charlietfl, Feb 17 '13 at 13:43
@charlietfl thanks for clarifying but can you share some inside how to create javascript model depending on json data like how to replicate json structure that maps to javascript knockout model. — afr0, Feb 17 '13 at 14:06
suggest you work with some of the demos and get a better understanding ...like the grid editor http://knockoutjs.com/examples/gridEditor.html — charlietfl, Feb 17 '13 at 14:15
You would create the model with the same structure that your controller will return. Try this: Download fiddler and use it to query /Project/GetTeamMembers and check out the structure there, you can replicate that on your knockout viewmodel (or you can use Knockout's mapping function) — amhed, Feb 17 '13 at 14:16
@amhed thanks for fiddler info i was surely missing that part. i tried using knockout mapping plugin it didn't work for me though i thought it should be pretty straight forward given the above scenario also there is not much debugging i could do with. I think even if i use knockout mapping plugin i think i would still need to make JavaScript model class on client if i were to handle add/delete item functionality for knockout list, isn't it so? — afr0, Feb 17 '13 at 14:48
@charlietfl there are different types of encoding that is used for json isn't it? — afr0, Feb 17 '13 at 16:42
encoding? no, but you can structure and nest data as needed but all within format protocol of JSON .. see http://www.json.org/ — charlietfl, Feb 17 '13 at 17:05

score 0 · Answer 1 · answered Feb 17 '13 at 15:26

Here is an example of using mapping with additional functions to manipulate a collection inside the model:

var MainViewModel = function (jsonObj) {
    //needed for accesing this inside functions
    var self = this;

    //Mapping from json object
    ko.mapping.fromJS(jsonObj, {}, self);

    //Additional properties that you might need Client-Side but that you don't have on your server viewModel
    self.CustomProperty = ko.observable();
    self.AnotherProperty = ko.observable();

    //Example of functions used to add or delete objects inside an observable array
    self.addRow = function () {
        self.loanEntries.push(new LoanEntryViewModel());
    };
    self.deleteRow = function (row) {
        self.loanEntries.remove(row);
    };
};

ko.mapping.fromJS takes a json object and creates the ViewModel without having to define all the properties of your Server Side class again. I usually have a method called "GetMappingObject" on my controller which returns an empty object that I use for mapping.

Hope that helps. Be sure to check out these:

calling server just to add n empty item on client that's bit dirty mate. — afr0, Feb 18 '13 at 06:47
What would be a better approach if you don't want to recode the whole object on the client? — amhed, Feb 18 '13 at 12:02
thats what I'm exactly looking for. I found this thread here [link](http://stackoverflow.com/questions/11055336/how-to-use-knockout-js-with-asp-net-mvc-viewmodels). This might sound bit of a hack but at least it can save lots of code duplication imo, this also shows how to extend the view model based on server model. i'm not able to look into this any further in detail but there are many upvotes that tells it should work however i couldn't find any working sample here. so do share if you find any working sample project. — afr0, Feb 18 '13 at 15:29
I had NO IDEA I could do that. Thanks, this will save me many unnecessary trips to the server — amhed, Feb 18 '13 at 18:33

anatomy of KnockoutJs and JSON data models

1 Answers1