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

时间:2013-09-05 14:30:46

标签: knockout.js knockout-es5-plugin

我正在尝试使用带有knockout-es5的否定布尔设置器,但是在视图中不会使用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);

1 个答案:

答案 0 :(得分:0)

您的问题是您错误地使用了revealing module pattern(您试图挂起使用构造函数模式时使用的self上的所有内容(demo 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

但是使用Knockout-ES5插件的全部意义在于你不要explicitly declare observable properties:所以你只需要将showViewModelData声明为常规属性,它也应该正常工作