knockout.js - knockout-es5 bool 值 setter 无法正常工作

Question

我正在尝试将取反 bool 值 setter 与 knockout-es5 一起使用，但是使用 toggleViewModel 函数进行的更改未在 View 中获取。

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

我在这里遗漏了什么吗？

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

正确的用法如下:您需要使用 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 插件的全部意义在于你不需要 explicitly declare observable properties:因此，您只需将 showViewModelData 声明为常规属性，它也应该可以正常工作