Использование ko.utils.arrayForEach для итерации над наблюдаемымArray

Question

Я пытаюсь вычислить сумму поля «цена» для наблюдаемого массива. У меня есть следующий код до сих пор:

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

}()); 

Когда я пытаюсь запустить это, я получаю «Ошибка: this.features не является функцией» в консоли Firebug.

Что я делаю неправильно?

Answer 1

Вычислительные наблюдаемые оцениваются сразу во время создания. В вашем случае appViewModel еще не был создан, и this не будет представлять appViewModel.

Существует много способов гарантировать, что this верен в этом случае. Вот два:

1. Создать его за пределами вашего исходного объекта буквального:

   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. Создайте свою модель представления в функции:

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