计算出的observable上的Knockout JS绑定不起作用

时间:2016-02-02 19:24:33

标签: javascript jquery asp.net knockout.js typescript

我正在尝试向asp.net MVC 5网站弹出屏幕添加一个新字段,该屏幕首先使用Entity Framework 6代码,使用Typescript和Knockout JS进行数据绑定。我没有写这个网站。我已经对它进行了几个月的修改。最初的程序员不再与公司合作。我以前从未使用过这些技术。

新字段是Web服务调用的结果。 Web方法确实返回结果。但是,该值不会显示在屏幕上。我脚本运行并显示所有其他数据。页面显示后,将返回对Web服务的延迟调用。我将提供标记和视图模型代码。非常感谢任何建议。

以下是HTML绑定的计算属性:

this.PredictedValue = ko.pureComputed(() => {
                var age = "";
                var race = "";
                var height = "";
                var studyId = this.Session().Study.PftCentralStudyId();
                var predictedSetName;
                var predictedSetId;
                var gender;
                if (this.StudyTestParameter().HasPredictedValues() == true) {
                    ko.utils.arrayForEach(this.Session().Study.StudyTestTypePredictedSets(),(item: Bll.TestTypePredictedSetVm) => {
                        if (String(item.TestType().Name()) == this.StudyTestParameter().TestType().Name())
                            predictedSetId = item.PredictedSetId();
                    });
                    if (predictedSetId == 0) {
                        return "";
                    }
                    else {
                        var match = ko.utils.arrayFirst(this.Session().PftCentralStudyPredictedSets(),(item: Bll.PftCentralPredictedSetsVm) => {
                            return String(item.Id) == String(predictedSetId)
                        });
                        predictedSetName = match.Name;
                        ko.utils.arrayForEach(this.Session().SessionValues(),(item: SessionValueVm) => {
                            if (String(item.StudySessionParameter().Name()) == "Age")
                                age = String(item.RecordedValue());
                        });
                        ko.utils.arrayForEach(this.Session().SessionValues(),(item: SessionValueVm) => {
                            if (String(item.StudySessionParameter().Name()) == "Race")
                                race = String(item.RecordedValue());
                        });
                        ko.utils.arrayForEach(this.Session().SessionValues(),(item: SessionValueVm) => {
                            if (String(item.StudySessionParameter().Name()) == "Height")
                                height = String(item.RecordedValue());
                        });
                        ko.utils.arrayForEach(this.Session().SessionValues(),(item: SessionValueVm) => {
                            if (String(item.StudySessionParameter().Name()) == "Sex")
                                gender = String(item.RecordedValue());
                        });
                        var promise = this.Session().CalculatePredicted(age, race, gender, height, String(this.StudyTestParameter().PftCentralStudyParameterId()), predictedSetName, studyId);
                        promise.done((data: string) => {
                            return data
                        });
                    }
                }
                else
                    return "";
            });

CalculatePredicted = (age: string, race: string, gender: string, height: string, studySessionParameterId: string, predictedSetName: string, studyId: number) => {

            var deferred = $.Deferred();

            $.ajax({
                url: "/Workflows/CalculatePredicted",
                cache: false,
                data: { age: age, ethnicity: race, gender: gender, height: height, studySessionParameterId: studySessionParameterId, testTypePredictedSetName: predictedSetName, studyId: studyId },
                dataType: "json",
                contentType: "application/json charset=utf-8"
            }).done(data => {
                deferred.resolve(data);
            }).fail((jqXHR) => {
                alert(jqXHR.responseText);
                deferred.reject();
            });
            return deferred;
        }

以下是HTML。

<div>
                                        Test Values:
                                        <table class="width100pct gridtable">
                                            <tbody data-bind="foreach: TestValues">
                                            <tr>
                                                <td data-bind="text: StudyTestParameter().Name"></td>
                                                <td data-bind="text: RecordedValue"></td>
                                                <td data-bind="text: ATSBestValue"></td>
                                                <td data-bind="text: PredictedValue"></td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>

1 个答案:

答案 0 :(得分:1)

您的承诺对象无法返回您的计算结果。在承诺完成时,计算机已经长期返回&#39; undefined&#39;。这就是异步调用的本质。考虑在promise.done()函数中设置一个不同的observable,然后绑定到UI中的那个新字段;如果基础字段发生变化,计算函数仍会触发。