javascript - knockout 多个 View 模型 - 未定义

Question

我正在开发一个 UI，它在主视图模型中包含多个 viewModel。您可以看到下面的结构:

function commonVM() {
   self = this;

   //initialize observable variables
   self.start_searching_visible = ko.observable(true); //start searching panel visible    
};

function searchCriteriaVM() {
   self = this;

   self.window_location = ko.observable("#/");
   self.company_search_criteria_visible = ko.observable(true);    
}

appViewModel = function () { 
   self = this;

   //False if the view has already been initialized
   isInitialized = false;
   self.commonViewModel = new commonVM();
   self.searchCriteriaViewModel = new searchCriteriaVM();     
   self.commonViewModel.start_searching_visible();     
}

var test = new appViewModel();
ko.applyBindings(test);

我收到 searchCriteriaViewModel 未定义错误。为什么我会得到这个？尽管我已经在上面的语句中初始化了，为什么我无法访问该变量？

Answer 1

在声明变量时使用var。当您错过 var 关键字时，变量将被声明为全局变量。在您的情况下，self首先引用appViewModel，但是当您创建commonVM时，self变量被分配了不同的值然后它在全局范围内具有不同的含义。

但是您遇到了很多其他错误 - 没有将 start_searching_visible 附加到 this/self 并且无法从实例访问它，从错误的 View 模型调用 start_searching_visible 等等。

function commonVM() {
    var self = this;

    //initialize observable variables
    self.start_searching_visible = ko.observable(true); //start searching panel visible    
};

function searchCriteriaVM() {
    var self = this;

    self.window_location = ko.observable("#/");
    self.company_search_criteria_visible = ko.observable(true);
}

appViewModel = function() {
    var self = this;

    //False if the view has already been initialized
    self.isInitialized = false;
    self.commonViewModel = new commonVM();
    self.searchCriteriaViewModel = new searchCriteriaVM();
    self.commonViewModel.start_searching_visible();
    // self.searchCriteriaViewModel.start_searching_visible();     
}

var test = new appViewModel();
ko.applyBindings(test);

<小时/>

我建议完成一些 JavaScript (OOP) 类(class)/教程。