揭示模塊模式產生問題的數據不再是全球

Question

這下面是我前面正在工作的代碼最小化版本..

var data = [mydata]; 
var appscope = function() { 
    function col(c) { 
     var self = this; 
     this.view = ko.observable(false); 
     this.view.subscribe(function(newValue) { 
      vm.updateCol(); 
     }); 
    } 
    var myModel = function() { 
     var self = this; 
     self.viewdata = ko.observableArray(data); 
     self.updateCol = function() { 
      console.log("updatecol called") 
     }; 
    }; 
    var vm = new myModel(); 
    ko.applyBindings(vm); 
}();  

在上面的代碼vm.updatecol作品作爲虛擬機是全球性的就appscope而言。此外數據是全球..

現在我試圖使用暴露模塊模式，改變了代碼如下..

var appscope = function() { 
    var that = this; 

    function col(c) { 
     var self = this; 
     this.view = ko.observable(false); 
     this.view.subscribe(function(newValue) { 
      // vm.updateCol(); no longer works.... 
      //that.appscope.myModel().updatecol(); throws error in myModel 
     }); 
    } 
    var myModel = function(data) { 
     var self = this; 
     self.viewdata = ko.observableArray(data); 
     self.target=ko.observable(null); 
     self.target(new col([])); 
     self.updateCol = function() { 
      console.log("updatecol called") 
     }; 
    }; 
    return { 
     myModel: myModel 
    }; 
}(); 
(function(appscope) { 
    var vm = new appscope.myModel([mydata]); 
    ko.applyBindings(vm); 
})(appscope); 

在上面的代碼vm.updatecol不起作用爲VM是出的範圍。我什至試圖that.appscope.myModel（）。updatecol（），但試圖重新創建myModel和數據不存在引發其他錯誤。

我該如何解決這個問題。 所有幫助真誠感謝。 謝謝

Answer 1

好消息！您已成功將col與myModel和vm分開。這主要是一件好事。但是，由於您仍想在col的view更改時致電updateCol，因此您確實需要以某種方式掛鉤它們。

你有三個選擇：

1. 創造它時

2. 交給myModel訂閱col的view

3. 再訪傳遞一個參考myModel實例爲col整個結構

這對我來說就像＃3一樣，但沒有更多的上下文是不可能的。

的＃1示例：

var appscope = function() { 
    var that = this; 

    function col(c, model) {      // *** 
     var self = this; 
     this.view = ko.observable(false); 
     this.view.subscribe(function(newValue) { 
      model.updateCol();     // *** 
     }); 
    } 
    var myModel = function(data) { 
     var self = this; 
     self.viewdata = ko.observableArray(data); 
     self.target=ko.observable(null); 
     self.target(new col([], self));   // *** 
     self.updateCol = function() { 
      console.log("updatecol called") 
     }; 
    }; 
    return { 
     myModel: myModel 
    }; 
}(); 
(function(appscope) { 
    var vm = new appscope.myModel([mydata]); 
    ko.applyBindings(vm); 
})(appscope); 

的＃2示例：

var appscope = function() { 
    var that = this; 

    function col(c) { 
     var self = this; 
     this.view = ko.observable(false); 
     // *** Not subscribing here 
    } 
    var myModel = function(data) { 
     var self = this; 
     self.viewdata = ko.observableArray(data); 
     self.target=ko.observable(null); 
     var c = new col([]);     // *** 
     self.target(c);      // *** 
     c.view.subscribe(function(newValue) { // *** 
      self.updateCol();     // *** 
     });         // *** 
     self.updateCol = function() { 
      console.log("updatecol called") 
     }; 
    }; 
    return { 
     myModel: myModel 
    }; 
}(); 
(function(appscope) { 
    var vm = new appscope.myModel([mydata]); 
    ko.applyBindings(vm); 
})(appscope); 

這第二種方法有您做target可觀察到的一個問題。如果target真的可以改變，我們需要做一些訂閱管理，這也是爲什麼我對上述第3項精益部分：

var appscope = function() { 
    var that = this; 

    function col(c) { 
     var self = this; 
     this.view = ko.observable(false); 
     // *** Not subscribing here 
    } 
    var myModel = function(data) { 
     var viewSub;          // *** 
     var self = this; 
     self.viewdata = ko.observableArray(data); 
     self.target=ko.observable(null); 
     var c = new col([]);        // *** 
     self.target(c);          // *** 
     subScribeCol(c);         // *** 
     self.target.subscribe(function(newCol) {   // *** 
      viewSub.dispose();        // *** 
      subcribeCol();         // *** 
     });             // *** 
     self.updateCol = function() { 
      console.log("updatecol called") 
     }; 
     function subscribeCol(c) { 
      viewSub = c.view.subscribe(function(newValue) { // *** 
       self.updateCol();       // *** 
      });            // *** 
     } 
    }; 
    return { 
     myModel: myModel 
    }; 
}(); 
(function(appscope) { 
    var vm = new appscope.myModel([mydata]); 
    ko.applyBindings(vm); 
})(appscope);