How do you properly reference the viewModel in extended methods when using the knockout.viewmodel plugin?

Question

I'm extending the viewModel. I need to implement the addEmployee method so that it properly references the viewModel.

This is what I have thus far:

JSON:

{"Employees":
    [{"FirstName":"James",
      "LastName":"Bond",
      "Addresses":[{"StreetNumber":"MI6","StreetName":"Undisclosed"},
                   {"StreetNumber":"SAS","StreetName":"Undisclosed"}]},
     {"FirstName":"Jason",
      "LastName":"Bourne",
      "Addresses":[{"StreetNumber":"CIA","StreetName":"Undisclosed"},
                   {"StreetNumber":"NSA","StreetName":"Undisclosed"}]}
     ]
}

JavaScript:

$.getJSON("http://localhost:58191/api/employees", function (jsonModel) {

document.getElementById("test").innerText = JSON.stringify(jsonModel);

var options = {
    extend: {
        "{root}": function () {

            var self = this;
            var employees = new Array();

            self.employees = ko.observableArray(employees);
            var arrayTest = [{ "FirstName": "test", "LastName": "test", "Addresses": [{ "StreetNumber": "MI6", "StreetName": "Undisclosed" }, { "StreetNumber": "SAS", "StreetName": "Undisclosed" }] }];

            self.addEmployee = function () {
                self.employees.push(arrayTest);

            }.bind(self);
        }
    }
}

var kovmmappingVM = ko.viewmodel.fromModel(jsonModel, options);    
ko.applyBindings(kovmmappingVM, document.getElementById("POC"));

});

I would appreciate any assistance. Thanks!

it doesn't appear to be updating the viewmodel with the new record when i click a button that invokes the addEmployee function. — user3699387, Jun 03 '14 at 12:24

score 0 · Accepted Answer · answered Jun 03 '14 at 13:12

0

Try this:

var kovmmappingVM = ko.viewmodel.fromModel(jsonModel, options);
kovmmappingVM.addEmployee = function (empl) {
    kovmmappingVM.Employees.push(empl);
}
ko.applyBindings(kovmmappingVM, document.getElementById("POC"));

answered Jun 03 '14 at 13:12

GôTô

7,974
3
32
43

interesting, i'll give it a shot :) – user3699387 Jun 03 '14 at 13:37
What about the options param? Did you intend to keep that? – user3699387 Jun 03 '14 at 13:50
@user3699387 Depends if you have other options – GôTô Jun 03 '14 at 13:51
You're assistance was instrumental. I've learning this library so I may reach out to you again for help. Thanks a lot brother :) – user3699387 Jun 03 '14 at 14:47
@user3699387 Well, you could upvote when I answer your questions :) Glad my answers are useful – GôTô Jun 03 '14 at 15:16

score 0 · Answer 2 · answered Jun 03 '14 at 14:46

This works:

var Employee = function () {

var self = this;    
self.addEmployee = function (kovmmappingVM) {

    kovmmappingVM.Employees.push({
                                    FirstName: "test",
                                    LastName: "test",
                                    Addresses: [{ "StreetNumber": "MI6", "StreetName":   "Undisclosed" }, { "StreetNumber": "SAS", "StreetName": "Undisclosed" }]

                                 });

    model = ko.viewmodel.toModel(kovmmappingVM);
    document.getElementById("test2").innerText = JSON.stringify(model);

    }.bind(self);
}


$.getJSON("http://localhost:58191/api/employees", function (jsonModel) {

    document.getElementById("test").innerText = JSON.stringify(jsonModel);

    var options = {
        extend: {
            "{root}": Employee
        }
    };

    var kovmmappingVM = ko.viewmodel.fromModel(jsonModel, options);   

    ko.applyBindings(kovmmappingVM, document.getElementById("POC"));  
});

How do you properly reference the viewModel in extended methods when using the knockout.viewmodel plugin?

2 Answers2