javascript에서 viewModel 함수에 액세스 knockout

Question

뷰 모델 내에 정의 된 메서드에 액세스하는 데 문제가 있습니다. 다음은

뷰 모델 정의입니다 : 내가보기 모델 메소드에 액세스하려고 $에서

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

(문서) .ready 기능, 코드는 다음과 같습니다 :

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을 "FetchProductFamiliesForProductsKO"함수에서 오류가 발생합니다. catch되지 않은 typeerror : object [object 객체]에 'AddProducts'메서드가 없습니다.

MainViewModel 메소드에 액세스하는 방법은 무엇입니까? View 모델 정의가 정확합니까? MainViewModel을 초기화하는 방법은 무엇입니까?

미리 감사드립니다.

Answer 1

여기에서 문제는 사용자가 ViewModel을 정의하는 방식입니다. JS에 함수 AddProducts이 표시되지 않는 이유는 생성 된 객체의 인스턴스를 연결하지 않고 속성과 함수를 정의하는 것입니다.

당신이 정의해야 당신이 같은 ViewModel :

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

통지 변수 self

친절이 데모를 확인하고 오류없이 콘솔을보고하여 생성 된 객체의 인스턴스를 참조하는 jsfiddle demo