在可计算的可观察对象上剔除JS绑定不起作用

Question

I am trying to add a new field to an asp.net MVC 5 website popup screen that uses Entity Framework 6 code first, Typescript and Knockout JS for databinding. I did not write this website. I have been making changes to it for a few months. The original programmer is no longer with the company. I have never worked with these technologies previously.

The new field is the result of a web service call. The web method does return results. However, the value is not displayed on the screen. I script runs and displays all the other data. The deferred call to the web service returns after the page displays. I will provide the markup and view model code. Any advice is greatly appreciated.

Below is the computed property that the HTML is bound to:

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

Below is the 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>

Answer 1

your promise object can't return for your computed. By the time the promise is done, the computed has long returned 'undefined'. That is the nature of async calls. Consider setting a different observable within the promise.done() function and bind to that new field in the UI instead; the computed function will still trigger if the underlying fields change.