1

问题是数据绑定不起作用。

我有一个包含声明的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

这是网络服务：

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

为了解决这个问题，我创建了一个 Claim 类，其中包含一个 observableArray() 用于支付费用。然后使用一个循环，我创建了每个 Claim 并将每个费用推入费用 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]);
}
于 2013-07-19T17:25:43.230 回答
0

这是行不通的：

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

因为您正在修改 observableArray() 的内部数组。

我不确定，但你可以试试这个：

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

我希望它有所帮助。

于 2013-07-19T09:47:14.960 回答