Sử dụng ko.utils.arrayForEach để lặp qua một ObservableArray

Question

Tôi đang cố tính tổng của trường 'giá' của 'observableArray'. Tôi có đoạn code sau cho đến nay:

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

}()); 

Khi tôi cố gắng chạy này, tôi nhận được một "Lỗi: this.features không phải là một chức năng" trong bảng điều khiển firebug.

Tôi đang làm gì sai?

Answer 1

Các quan sát được tính toán được đánh giá ngay lập tức trong khi tạo. Trong trường hợp của bạn, appViewModel chưa được tạo và this sẽ không đại diện cho appViewModel.

Có nhiều cách để đảm bảo rằng this là chính xác trong trường hợp này. Dưới đây là hai:

1. Tạo nó bên ngoài của đối tượng ban đầu của bạn theo nghĩa đen:

   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. Tạo mô hình điểm của bạn trong một chức năng:

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