Javascript 更新ObservalArray时UI不更新

当用户单击UI（html表tblAllCert）列表中的一行时，我会触发一个单击事件，以填充另一个可观察数组，该数组应填充第二个html表（TBLCERTTails）。我的点击事件触发，我可以看到数据返回，我可以看到可观察数组中的数据，但我的视图不会更新

下面是代码中序列的概述-

 1. user clicks on row from html table tblAllCert, which fires selectThing method.
 2. In viewmodel code, selectThing passes the row data from the row selected to the GetCertificateDetails(row) method.
 3. GetCertificateDetails(row) method calls getCertDetails(CertificateDetails, source) function on my data service (the data service gets data from a web api).  getCertDetails(CertificateDetails, source) function returns an observable array.
 4. once the data is returned to selectThing, CertificateDetails observable array is populated.  It does get data to this point. 

步骤5应该更新UI（特别是tblCertDetails html表），但是UI不会得到更新

这是我的看法-

                                    <table id="tblAllCert" border="0" class="table table-hover" width="100%">
                                    <tbody data-bind="foreach: allCertificates">
                                        <tr id="AllCertRow" style="cursor: pointer" data-bind="click: $parent.selectThing, css: { highlight: $parent.isSelected() == $data.lwCertID }">
                                            <td>
                                                <ul style="width: 100%">

                                                    <b><span data-bind="    text: clientName"></span>&nbsp;(<span data-bind="    text: clientNumber"></span>)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span data-bind="    text: borrowBaseCount"></span>&nbsp;Loan(s)&nbsp;</b>
                                                    <br />
                                                    Collateral Analyst:&nbsp;<span data-bind="    text: userName"></span>
                                                    <br />
                                                    Certificate:&nbsp;<span data-bind="text: lwCertID"></span>&nbsp;&nbsp;Request&nbsp;Date:&nbsp;<span data-bind="    text: moment(requestDate).format('DD/MMM/YYYY')"></span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>


                                <table id="tblCertDetails" border="0" class="table table-hover" width="100%">
                                <tbody data-bind="foreach: CertificateDetails">
                                    <tr id="Tr1" style="cursor: pointer">
                                        <td>
                                            <ul style="width: 100%">
                                                <b>Loan:&nbsp;<span data-bind="    text: loanNum"></span>
                                        </td>
                                    </tr>
                                </tbody>

                            </table>

---

UI为什么不更新的想法？

当您使用淘汰数组时，应该更改数组的内容，而不是数组本身的引用。在

中选择thing

，当您设置

CertificateDetails = GetCertificateDetails(row);

分配给

CertificatedDetails

的新

observableArray

与绑定到表的

observableArray

不同

不过，你已经非常接近解决方案了。在AJAX成功回调中，您可以直接执行到参数

certificateDetailsObservable

的映射，而不是创建一个新的

dataobservay

并映射到其中

ko.mapping.fromJSON

应该替换表绑定数组的内容（您还可以去掉

selectThing

中的赋值）

        var getCertDetails = function (certificateDetailsObservable, source) {
        var dataObservableArray = ko.observableArray([]);
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "/api/caapproval/CertDtlsByID/",
            data: source,
            async: false,
            success: function (dataIn) {

                ko.mapping.fromJSON(dataIn, {}, dataObservableArray);

            },
            error: function (error) {
                jsonValue = jQuery.parseJSON(error.responseText);
                //jError('An error has occurred while saving the new part source: ' + jsonValue, { TimeShown: 3000 });
            }

        });
        return dataObservableArray;
    }

CertificateDetails = GetCertificateDetails(row);