le régleur booléen de knockout-es5 ne fonctionne pas correctement

Question

J'essaie d'utiliser un setter booléen négatif avec knockout-es5, mais les modifications apportées à l'utilisation de la fonction toggleViewModel ne sont pas reprises dans la vue.

Quand j'utilise self.showViewModelData(!self.showViewModelData()) il fonctionne comme prévu. Dans le débogueur, je peux voir que les valeurs sont correctement définies dans le modèle de vue, ce qui m'amène à penser que, pour une raison quelconque, la définition des propriétés ne fonctionne pas correctement.

Il y a quelque chose que j'ai manqué ?

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

Votre problème est que vous utilisez le modèle de module révélateur incorrectement (vous essayez de tout accrocher sur self qui est utilisé lors de l'utilisation du modèle de constructeur (démo 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;
})();

L'utilisation correcte est la suivante : au lieu de self vous devez définir vos champs et fonctions localement avec 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;
})();

Demo JSFiddle .

Mais l'intérêt d'utiliser le plugin Knockout-ES5 est que vous n'avez pas à déclarer explicitement les propriétés observables : Donc vous devez juste déclarer votre showViewModelData comme une propriété normale et cela devrait également fonctionner correctement.