為什么數據綁定不起作用？ （使用嵌套的foreach循環）

Question

問題在於數據綁定不起作用。

我有一個包含聲明的observableArray（） 。 每個聲明都有一個observableArray（）費用，這是self.pc_listOfExpenses（）中的一項 。

這是兩個數組的結構：

self.pc_listOfClaims = ([
   ID: 34
   claimAgainst: "CompanyName"
   date: "2010-10-10"
   desc: "Description"
   **expenses: Object[0]** // <= This one should be an array.
]);

self.pc_listOfExpenses = ko.observableArray([
   ID: "34"
   **Array** // <= This is the array of "Expense" Objects 
]);

注意： *不要擔心上面的正確語法。 我使用JSON填充了服務中的數組。 我在控制台中看到的是Object [0]。 *

想法是將每個索賠與相應的費用數組進行映射：如果我們有ClaimID = 34 ，則在self.pc_listOfExpenses（）數組中，我們有34 => Array（） 。

這是淘汰賽代碼 ：

//#region Preview Claims Block
/**************************************************/
/*              Preview Claims Block              */
/**************************************************/

self.pc_listOfClaims = ko.observableArray([]);
self.pc_showDetailsArr = ko.observableArray([]);
self.pc_listOfExpenses = ko.observableArray([]);

// Get userID-specified Claims using WS
pc_GetSpecifiedClaims(self);

for (var i = 0; i < self.pc_listOfClaims().length; i++) {
    self.pc_showDetailsArr()[self.pc_listOfClaims()[i].ID] = ko.observable(false);
}

self.pc_showMoreDetails = function (claim) {

   if (typeof claim !== "undefined") {
       self.pc_showDetailsArr()[claim.ID](!self.pc_showDetailsArr()[claim.ID]());

       pc_GetClaimExpenses(claim.ID);

       for (var i = 0; i < self.pc_listOfExpenses()[claim.ID].length; i++) {
           self.pc_listOfClaims()[claim_id]["expenses"]().push(self.pc_listOfExpenses()[claim.ID][i]);
       }
   }
}
//#endregion

這是Web服務 ：

function pc_GetClaimExpenses(claimID) {

    $.ajax({
        cache: false,
        async: false,
        type: 'GET',
        url: '/DesktopModules/UltimateExpenses/API/Claims/GetSpecifiedExpensesAsJSONString',
        success: function (data) {
            self.pc_listOfExpenses()[claimID] = JSON.parse(data);
            //console.log(JSON.parse(data));
        }
    });
}

這是視圖 ：

<table id="claimsDataTable">
    <tbody data-bind="foreach: pc_listOfClaims">
        <tr>
            <td data-bind="text: claimAgainst"></td>
            <td data-bind="text: projectName"></td>
            <td data-bind="text: taskName"></td>
            <td data-bind="text: price"></td>
            <td data-bind="text: status"></td>
            <td data-bind="text: date"></td>
            <td class="actionOptions">
                <a href="#" data-bind="click: pc_showMoreDetails">M</a>
            </td>
        </tr>
        <tr>
            <td colspan="7" data-bind="visible:  pc_showDetailsArr()[$data.ID]">

                <!-- This is the part which does not work-->

                <div data-bind="foreach: expenses"> 
                    <span data-bind="text: ID"></span>
                    <span data-bind="text: Type"></span>
                    <span data-bind="text: Price"></span>
                </div>

            </td>
        </tr>
    </tbody>
</table>

Answer 1

為了解決該問題，我創建了Claim類，並使用了一個observableArray（）作為費用。 然后使用循環創建每個索賠，並將所有費用推入費用observableArray（）中。 這是我必須添加/更改的代碼。 我希望它也可以幫助其他人。

索賠類別：

function Claim(ID, claimAgainst, userID, projectName, taskName, desc, price, status, date) {
   this.ID = ID;
   this.claimAgainst = claimAgainst;
   this.userID = userID;
   this.projectName = projectName;
   this.taskName = taskName;
   this.desc = desc;
   this.price = ko.observable(price);
   this.status = ko.observable(status);
   this.date = date;
   this.expenses = ko.observableArray([]);
}//Claim

Web服務獲取聲明並創建對象：

function pc_GetSpecifiedClaims(self) {

    $.ajax({
        cache: false,
        async: false,
        type: 'GET',
        url: '/DesktopModules/UltimateExpenses/API/Claims/GetSpecifiedClaimsAsJSONString',
        success: function (data) {

            tempArr = JSON.parse(data);

            for (var i = 0; i < tempArr.length; i++) {

                self.pc_listOfClaims.push(new Claim(tempArr[i].ID, tempArr[i].claimAgainst, tempArr[i].userID,
                    tempArr[i].projectName, tempArr[i].taskName, tempArr[i].desc, tempArr[i].price,
                    tempArr[i].status, tempArr[i].date));
            }
        }
    });
}

最后，我使用相應的ClaimID將數組從self.pc_listOfExpenses（）推送到self.pc_listOfClaims（）。expenses（）中：

for (var i = 0; i < self.pc_listOfExpenses()[claim.ID].length; i++) {
   self.pc_listOfClaims()[claim_id].expenses.push(self.pc_listOfExpenses()[claim.ID][i]);
}

Answer 2

這行不通：

self.pc_listOfExpenses()[claimID] = JSON.parse(data);

因為您正在修改observableArray（）的內部數組。

我不確定，但是您可以嘗試這樣：

var items = self.pc_listOfExpenses();
items[claimID] = JSON.parse(data);
self.pc_listOfExpenses(items);

希望對您有所幫助。