0

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

我有一个带有几个（简单，因为这只是为了测试）子虚拟机的视图模型，其中一个有一个计算变量，它应该显示另一个虚拟机数组的聚合成本。

当我通过 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());
4

2 回答 2

0

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

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

self.ActionList = ko.observableArray(mappedActions);

提琴手

于 2015-02-09T16:23:13.607 回答
0

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

}
于 2015-02-09T16:23:45.433 回答