Question

So, in my first week using knockout, I think I have gotten a good prototype:
(Trimmed down and removing the ajaxy calls)

http://jsfiddle.net/NelsonLamprecht/39dfx/

"use strict";

var steeringTeamSheetViewModel = function (serviceUrl) {
var self = this;
self.viewModel = ko.mapping.fromJS([]);

self.InitializeAjax = function () {
    //abbreviated  
};

self.GetData = function () {
    //abbreviated
    var data = {
        "Sections": [{
            "ProjectType": "BUSINESS EXPANSION",
                "Projects": [{
                "ID": "767a46a2-ddba-435c-a9f9-fdb9f0175337",
                    "ItemOrder": 0,
                    "ProjectName": "project abc"
            }, {
                "ID": "0e36d7da-92e6-4f1b-939d-936d6e759115",
                    "ItemOrder": 0,
                    "ProjectName": "project abc"
            }, {
                "ID": "f6e447d4-955d-48e0-bcdf-6db9044b7a89",
                    "ItemOrder": 0,
                    "ProjectName": "project a"
            }]
        }, {
            "ProjectType": "OPER & MAINT - EFFICIENCY",
                "Projects": [{
                "ID": "9883a3c8-d01e-4fc9-8f66-9b46d720afde",
                    "ItemOrder": 0,
                    "ProjectName": "project q"
            }]
        }, {
            "ProjectType": "OTHER",
                "Projects": [{
                "ID": "f1ccfa79-c5b1-4880-b5a1-1c2350e709e1",
                    "ItemOrder": 0,
                    "ProjectName": "project 1"
            }]
        }]
    };
    self.ProcessRetrievedData(data);
};

self.ProcessRetrievedData = function (retrievedData) {
    self.viewModel(retrievedData);
};   

self.GetData();
};
var steeringTeamSheetService = 'someurl';
var sts = new steeringTeamSheetViewModel(steeringTeamSheetService);
ko.applyBindings(sts);

What I am now trying to do is to change the ko.oberservableArray into another binding, like
the .indexed() one that is floating around out there.

http://jsfiddle.net/NelsonLamprecht/39dfx/19/

"use strict";

var steeringTeamSheetViewModel = function (serviceUrl) {
var self = this;
var mapping = {
'sections': {
    create: function(options) {
        alert(options);
    }
}
}
self.viewModel = ko.mapping.fromJS([],mapping);

self.InitializeAjax = function () {
    //abbreviated  
};

self.GetData = function () {
    //abbreviated
    var data = {
        "Sections": [{
            "ProjectType": "BUSINESS EXPANSION",
                "Projects": [{
                "ID": "767a46a2-ddba-435c-a9f9-fdb9f0175337",
                    "ItemOrder": 0,
                    "ProjectName": "project abc"
            }, {
                "ID": "0e36d7da-92e6-4f1b-939d-936d6e759115",
                    "ItemOrder": 0,
                    "ProjectName": "project abc"
            }, {
                "ID": "f6e447d4-955d-48e0-bcdf-6db9044b7a89",
                    "ItemOrder": 0,
                    "ProjectName": "project a"
            }]
        }, {
            "ProjectType": "OPER & MAINT - EFFICIENCY",
                "Projects": [{
                "ID": "9883a3c8-d01e-4fc9-8f66-9b46d720afde",
                    "ItemOrder": 0,
                    "ProjectName": "project q"
            }]
        }, {
            "ProjectType": "OTHER",
                "Projects": [{
                "ID": "f1ccfa79-c5b1-4880-b5a1-1c2350e709e1",
                    "ItemOrder": 0,
                    "ProjectName": "project 1"
            }]
        }]
    };
    self.ProcessRetrievedData(data);
};

self.ProcessRetrievedData = function (retrievedData) {
    self.viewModel(retrievedData);
    //I think I should be using something like
    //self.viewModel = ko.mapping.fromJSON(retrievedData,mapping,{});
};   

self.GetData();
};
var steeringTeamSheetService = 'someurl';
var sts = new steeringTeamSheetViewModel(steeringTeamSheetService);
ko.applyBindings(sts);

However, without all that, I don’t think I am following the right pattern in setting up a model and getting the data from a web service (c#).

Can someone validate I am doing this right as well as help with the create pattern?

Answer 1

As I understand your problem, you try to download data via ajax and store it in the property ‘viewModel’ of your steeringTeamSheetViewModel. Your way looks ok to me.

You should not overwrite self.viewModel. Because if ko.applyBindings had run to that point you would break the binding.

self.ProcessRetrievedData = function (retrievedData) {
    // map the data from the viewModel and update self.viewModel
    self.viewModel(ko.mapping.fromJSON(retrievedData,mapping,{}));
};   

Keep in mind that ko.mapping will become very slow if you have large view models.