access viewModel function in javascript function- knockout

Question

Have a problem accessing methods defined inside view model.

Below are the view model definitions:

ProductMenu = function (name, subProductsMenu1, selectedMenu) {
    name = ko.observable(name);
    submenu = ko.observableArray(subProductsMenu1);
    selectedProductName = ko.observable();
};
ProductSubMenu = function () {
    submenuName = ko.observable();
    submenu2 = ko.observableArray([]);
    selectedSubMenuName = ko.observable();
};
ProductSubMenu2 = function () {
    submenu2Name = ko.observable();
    properties = ko.observableArray([]);
    selectedSubMenu2Name = ko.observable();
};
Properties = function () {
    productName = ko.observable();
    shortDesc = ko.observable();
    longDesc = ko.observable();
    additionalDocs = ko.observableArray([]);
};
var MainViewModel = function () {
    productModel = new ProductMenu();
    subMenuModel = new ProductSubMenu();
    submenu2Model = new ProductSubMenu2();
    propertyModel = new Properties();
    AllProductsModel = ko.observableArray([]);

   ReturnToFamilyProduct = ko.observable(true);
    ShowSubMenu = ko.observable(false);
    showSubMenu2 = ko.observable(false);
    ShowBackBtnOnSubMenuClick = ko.observable(false);
    IfDocumentsPresent = ko.observable(true);

    //to add product to products array
    AddProducts = function (name, subProductsMenu1, selectedMenu) {
        this.AllProductsModel.push(new ProductMenu(name, subProductsMenu1, selectedMenu));
    };
};

In $(document).ready function i am trying to access the view model methods, the code is shown below:

 var VM;

    $(document).ready(function () {
        VM = new MainViewModel();
        ko.applyBindings(VM);

        FetchProductFamiliesForProductsKO();
    });
    function FetchProductFamiliesForProductsKO() {

        $.getJSON(GetPath('/FetchProduct'), {}, function (data) {
            for (var i = 0; i < data.length; i = i + 1) {
                var family = data[i];
                VM.AddProducts(family, null, family);
            }
        }).error(function () {
            console.log("Error occured");
        });enter code here
    };

I get an error in the function "FetchProductFamiliesForProductsKO" : uncaught typeerror: object[object object] has no method 'AddProducts'.

How to access the MainViewModel methods? are the View model definitions correct? and how to intialize the MainViewModel?

Thanks in advance.

Answer 1

The problem here is in the way you are defining your ViewModel. You are defining properties and functions without attaching them the instance of the created object that's why JS don't see the function AddProducts.

you should define your ViewModel like this:

function MainViewModel() {
    self = this;
    self.productModel = new ProductMenu();
    self.subMenuModel = new ProductSubMenu();
    self.submenu2Model = new ProductSubMenu2();
    self.propertyModel = new Properties();
    self.AllProductsModel = ko.observableArray([]);

    self.ReturnToFamilyProduct = ko.observable(true);
    self.ShowSubMenu = ko.observable(false);
    self.showSubMenu2 = ko.observable(false);
    self.ShowBackBtnOnSubMenuClick = ko.observable(false);
    self.IfDocumentsPresent = ko.observable(true);

    //to add product to products array
    self.AddProducts = function (name, subProductsMenu1, selectedMenu) {
        self.AllProductsModel.push(new ProductMenu(name, subProductsMenu1, selectedMenu));
    };
}

notice variable self that refer to the instance of your created object

kindly check this demo and watch the console without errors jsfiddle demo