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

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

(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.

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

Ответы

Ответ 1

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

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

  • Создайте его вне вашего исходного литерала объекта:

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

  • Создайте свою модель просмотра в функции:

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