knockout-es5布爾setter不能正常工作

Question

我想用knockout-es5使用否定的布爾setter，但是使用toggleViewModel函數的更改不會在視圖中拾取。

當我使用self.showViewModelData(!self.showViewModelData())它確實按預期工作。在調試器中，我可以看到這些值實際上在viewmodel中正確設置，這導致我出於某種原因認爲設置屬性無法正常工作。

我在這裏失蹤的任何東西？

var vm = (function(){ 
    var self = this; 

    self.showViewModelData = ko.observable(false); 

    self.toggleViewModel = function(){ 
    self.showViewModelData = !self.showViewModelData; 
    } 

    var vm = { 
    toggleViewModel: self.toggleViewModel, 
    showViewModelData: self.showViewModelData 
    } 

    ko.track(vm); 
    return vm; 
})(); 
ko.applyBindings(vm); 

Answer 1

你的問題是，你正在使用的revealing module pattern不正確（您想使用構造模式當self掛一切所使用（演示JSFiddle））：

var vm = (function(){ 
    //this will be the global (window) object 
    var self = this; 

    self.showViewModelData = ko.observable(false); 

    self.toggleViewModel = function(){ 
    //when exectued "self" will be the global (window) object 
    //but you have bound to vm so you are setting the wrong property here 
    self.showViewModelData = !self.showViewModelData; 
    } 

    //this object gets bound by KO 
    var vm = { 
    toggleViewModel: self.toggleViewModel, 
    showViewModelData: self.showViewModelData 
    } 

    ko.track(vm); 
    return vm; 
})(); 

正確的用法是以下內容：而不是self您需要在本地定義您的字段和功能var：

var vm = (function(){ 

    var showViewModelData = ko.observable(false); 

    var toggleViewModel = function(){ 
     this.showViewModelData = !this.showViewModelData; 
    } 

    var vm = { 
    toggleViewModel: toggleViewModel, 
    showViewModelData: showViewModelData 
    } 

    ko.track(vm); 
    return vm; 
})(); 

演示JSFiddle。

但使用淘汰賽-ES5插件的整個的一點是，你不給explicitly declare observable properties:所以你剛纔宣佈的showViewModelData作爲普通的屬性，它也應該可以正常