CODEWITHSUNDEEP
knockout.jsknockout-viewmodel-plugin
user3699387
user3699387

Reputation: 3

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

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!

Upvotes: 0

Views: 72

Answers (2)

user3699387
user3699387

Reputation: 3

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"));  
});

Upvotes: 0

GôTô
GôTô

Reputation: 8053

Try this:

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

Upvotes: 0

Related Questions