Używanie ko.utils.arrayForEach do iterowania po obiekcie obserwowalnym

Question

Próbuję obliczyć sumę pola "cena" obiektu obserwowalnegoArray. Mam następujący kod do tej pory:

(function(){ 

function objFeatures(name,price) { 
     return { 
      name: ko.observable(name), 
      price: ko.observable(price), 

      removeFeatures: function() { 
       appViewModel.features.remove(this); 
      } 
     } 
    } 

var appViewModel = { 
features: ko.observableArray([ 
      new objFeatures("Feature1", 20), 
      new objFeatures("Feature2", 20) 
     ]), 

grandTotal: ko.computed(function() { 
      var total = 0; 
      ko.utils.arrayForEach(this.features(), function() { 
       total += this.price(); 
      }) 
      return total; 
     }) 
}; 

ko.applyBindings(appViewModel); 

}()); 

Kiedy próbuję uruchomić to, otrzymuję „Błąd: this.features nie jest funkcją” w konsoli Firebug.

Co robię źle?

Answer 1

Oblicowane obserwowalne są oceniane natychmiast podczas tworzenia. W Twoim przypadku appViewModel nie został jeszcze utworzony, a this nie będzie oznaczać appViewModel.

Istnieje wiele sposobów, aby upewnić się, że w tym przypadku this jest poprawne. Tutaj są dwa:

1. Tworzenie go poza początkowej przedmiotu dosłownym:

   var appViewModel = { 
       features: ko.observableArray([ 
        new objFeatures("Feature1", 20), 
        new objFeatures("Feature2", 20) 
        ]) 
   }; 
   
   appViewModel.grandTotal = ko.computed(function() { 
       var total = 0; 
       ko.utils.arrayForEach(this.features(), function(feature) { 
        total += feature.price(); 
       }); 
   
       return total; 
   }, appViewModel); 
   

2. Tworzenie modelu widok w funkcję:

   var AppViewModel = function() { 
       this.features = ko.observableArray([ 
        new objFeatures("Feature1", 20), 
        new objFeatures("Feature2", 20) 
       ]); 
   
       this.grandTotal = ko.computed(function() { 
        var total = 0; 
        ko.utils.arrayForEach(this.features(), function(feature) { 
         total += feature.price(); 
        }); 
        return total; 
       }, this); 
   }; 
   
   ko.applyBindings(new AppViewModel());​