Knockoutjs вычисленные переменные из данных, заполненных json

Question

В настоящее время я немного экспериментирую с нокаутом и JavaScript в целом, но просто столкнулся с проблемой, которую не могу решить.

У меня есть view-модель с несколькими (простыми, так как это только для тестирования) под виртуальными машинами, и одна из них имеет вычисляемую переменную, которая должна отображать совокупные затраты на массив другой виртуальной машины.

Когда я загружаю данные через json, все хорошо заполняется, но вычисленные значения остаются "неопределенными". Я уже пытался пометить вычисленное с помощью "deferEvaluation", но это не помогло.

Если коротко, то это мой jsfiddle http://jsfiddle.net/v73rxckf/9/

Есть идеи? Или я вообще что то не так делаю?

Код JS:

function Service(data) {
    var self = this;

    self.Cost = ko.observable(data.Cost);
}

function Action(data) {
    var self = this;

    self.Name = ko.observable(data.Name);
    self.Dates = ko.observableArray(data.Dates);
    self.Services = ko.observableArray(data.Services);

    self.OverallCost = ko.computed(function() {
        calculated = 0;

        ko.utils.arrayForEach(self.Services(), function(item) {
            calculated += parseFloat(ko.utils.unwrapObservable(item.Cost));
        });

        return calculated;
    }, { deferEvaluation : true });

}

function Campaign(data) {

    var self = this;

    self.Name               = ko.observable(data.Name);
    self.Deadline           = ko.observable(data.Deadline);
    self.ActionList         = ko.observableArray(data.ActionList);
}

function ApplicationViewModel () {

    var self = this;
    self.List = ko.observableArray([]);

    $.ajax("/echo/json/", {
        data: {
            json: ko.toJSON(fakeData)
        },
        type: "POST",
        dataType: 'json',
        success: function(data) {
            var mappedCampaigns = $.map(data, function(item) {
                return new Campaign(item);
            });

            self.List(mappedCampaigns);
        }
    });
}

var fakeData = [{
    "Name":"testname1",
    "Deadline":"testdeadline1",
    "ActionList":[
                    {
                        "Name":"testaction1",
                        "Dates":[ { "DateValue":"testdate1" }, { "DateValue":"testdate2" } ],
                        "Services":[ { "Cost":"100" }, { "Cost":"50" } ]
                    },
                    {
                        "Name":"testaction2",
                        "Dates":[ { "DateValue":"testdate1" }, { "DateValue":"testdate2" } ],
                        "Services":[{ "Cost":"100" }, { "Cost":"50" } ]
                    }
                ]
}];

ko.applyBindings(new ApplicationViewModel());

Answer 1

Вы не инициализируете свои объекты Action, в вашей модели представления кампании вы должны обновить свои модели представления действия и поместить их в наблюдаемый массив:

function Campaign(data) {

    var self = this;

    self.Name               = ko.observable(data.Name);
    self.Deadline           = ko.observable(data.Deadline);
    self.ActionList         = ko.observableArray([]);

    if(data.ActionList){
        for(var i = 0; i < data.ActionList.length; i++){
            self.ActionList.push(new Action(data.ActionList[i]));
        }
    }
}

Вам нужно будет сделать то же самое для вашей модели представления службы. например:

function Service(data) {
    var self = this;

    self.Cost = ko.observable(data.Cost);
}

function Action(data) {
    var self = this;

    self.Name = ko.observable(data.Name);
    self.Dates = ko.observableArray(data.Dates);
    self.Services = ko.observableArray([]);

    if(data.Services){
        for(var i = 0; i < data.Services.length; i++){
            self.Services.push(new Service(data.Services[i]));
        }
    }

    self.OverallCost = ko.computed(function() {
        calculated = 0;

        ko.utils.arrayForEach(self.Services(), function(item) {
            calculated += parseFloat(ko.utils.unwrapObservable(item.Cost));
        });

        return calculated;
    });

}

Answer 2

Вы не наносили на карту ActionList и вместо этого он просто использовал данные JSON.

var mappedActions = $.map(data.ActionList, function(item) {
    return new Action(item);
});

self.ActionList = ko.observableArray(mappedActions);

JsFiddle