1

問題は、データバインディングが機能しないことです。

クレームを含むobservableArray ()があります。各クレームには費用のobservableArray()があり、これはself.pc_listOfExpenses()の 1 つの項目です。

両方の配列の構造は次のとおりです。

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>
4

2 に答える 2

1

この問題を解決するために、費用用の observableArray() を使用して Claim クラスを作成しました。次に、ループを使用して各クレームを作成し、すべての費用を費用 observableArray() にプッシュしました。これが私が追加/変更しなければならなかったコードです。それが他の誰かにも役立つことを願っています。

Claim クラス:

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]);
}
于 2013-07-19T17:25:43.230 に答える