knockout-es5布尔setter无法正常工作

Question

我正试图使用knockout-es5的否定布尔setter，但是使用toggleViewModel函数的更改不会在视图中拾取。

当我使用self.showViewModelData(!self.showViewModelData())时，它确实按预期工作。在调试器中，我可以看到视图模型中的值实际上是正确设置的，这让我认为出于某种原因，设置属性（如）无法正常工作。

我这里有什么遗漏吗？

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

您的问题是错误地使用了揭示模块模式（您试图将所有内容挂在使用构造函数模式时使用的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;
})();

正确的用法如下：您需要使用var:在本地定义字段和函数，而不是self

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。

但是使用Knockout-ES5插件的全部意义在于，您不需要显式地声明可观察的属性：因此，您只需要将showViewModelData声明为常规属性，它也应该可以很好地工作