Knockoutjs 从 json 填充数据计算变量

Question

我目前正在尝试使用淘汰赛和 javascript 一般情况下，但遇到了一个我无法解决的问题。

我有一个包含多个（简单，因为这仅用于测试）子 VM 的视图模型，其中一个有一个计算变量，该变量应显示另一个 VM 数组的总成本。

当我通过 json 加载数据时，所有内容都得到了很好的填充，但计算结果仍然是 "undefined"。我已经尝试用 "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

您没有映射 ActionList，而只是使用 json 数据。

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

self.ActionList = ko.observableArray(mappedActions);

JsFiddle

Answer 2

您没有初始化您的 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;
    });

}

Knockoutjs 从 json 填充数据计算变量

Knockoutjs computed variables from json filled data

javascript

json

ko.observablearray

knockout.js

computed-observable