knockout.js 数据中的嵌套 foreach 显示但未正确显示

Posted 2023-03-27

【中文标题】knockout.js 数据中的嵌套 foreach 显示但未正确显示

【英文标题】：Nested foreach in knockout.js data show up but not displaying right

【发布时间】：2021-12-07 14:35:57

【问题描述】：

我想使用敲除在表格中显示来自 ajax 结果的数据。数据显示，但显示不正确。我不知道如何解决这个问题。我已经阅读了这里的大部分帖子，但仍然找不到问题所在。

预期结果

帐户 A 页眉 第 1 行 第 2 行 第 3 行

显示结果

帐户 A 页眉 第1行第2行第3行

html 是：

<form>
//detail form here
<button type="button" data-bind="click: $root.getReport">GET DATA</button>
</form>

<table data-bind="foreach: coas" style="width: 100%">
                <thead>
                    <tr><th colspan="5"><span data-bind="text: coaname">COA NAME</span></th></tr>
                    <tr>
                        <th style="width: 20%">date</th>
                        <th style="width: 20%">account</th>
                        <th style="width: 20%">debet</th>
                        <th style="width: 20%">credit</th>
                        <th style="width: 20%">saldo</th>
                    </tr>
                </thead>
                <tbody>
                    <tr data-bind="foreach: coaDetails">
                        <td data-bind="text: date">### date ###</td>
                        <td data-bind="text: coa">### account ###</td>
                        <td data-bind="text: debet">### debet ###</td>
                        <td data-bind="text: credit">### credit ###</td>
                        <td data-bind="text: saldo">### saldo ###</td>
                    </tr>
                </tbody>
            </table>

JS 是：

function AddCoaDetails(date,coa,debet,credit,saldo)
        var self= this; 
        self.date = ko.observable(date);
        self.coa = ko.observable(coa);
        if(debet == 0)
            self.debet = '';
        else
            self.debet = ko.observable(addPeriod(debet,","));
        if(credit == 0)
            self.credit = '';
        else
            self.credit = ko.observable(addPeriod(credit,","));
        if(saldo == 0)
            self.saldo = '';
        else
            self.saldo = ko.observable(addPeriod(saldo,","));
    

    function AddCoaModel(coaname,detail)
        var self = this;
        self.coaname = ko.observable(coaname);
        self.coaDetails = ko.observableArray(detail)
    

function LedgerModel()
        var self = this;
        self.coas = ko.observableArray([]);
        var coas = self.coas;

        self.getReport = function()
            $.ajax( 
                 //after ajax succeed, will get var listcoa, data sample is attached below
                 var mappedCoas = listcoa.map(function (i) 
                            var coadetail = $(i.detail).each(function(key,item) 
                                                return new AddCoaDetails(item.date, item.coa, item.debet, item.credit, item.saldo);
                                            );
                            return new AddCoaModel(i.namecoa, coadetail);
                        );
                        coas(mappedCoas);


 ko.applyBindings(new LedgerModel());

样本数据：

[
  
    "namecoa": "PIUTANG",
    "detail": [
      
        "date": "",
        "coa": "Saldo Awal",
        "debet": 0,
        "credit": 0,
        "saldo": 0
      ,
      
        "date": "2021-10-12",
        "coa": "KAS",
        "debet": "1000000.00",
        "credit": "0.00",
        "saldo": 1000000
      ,
      
        "date": "2021-10-13",
        "coa": "KAS",
        "debet": "10000.00",
        "credit": "0.00",
        "saldo": 1010000
      
    ]
  ,
  
    "namecoa": "OPERATIONAL COST",
    "detail": [
      
        "date": "",
        "coa": "Initial Saldo",
        "debet": 0,
        "credit": 0,
        "saldo": 0
      ,
      
        "date": "2021-10-19",
        "coa": "BANK 2",
        "debet": "0.00",
        "credit": "5000000.00",
        "saldo": -5000000
      ,
      
        "date": "2021-10-19",
        "coa": "BANK 1",
        "debet": "0.00",
        "credit": "10000000.00",
        "saldo": -15000000
      
    ]
  
]

知道为什么吗？

【参考方案1】：

我认为您需要做的就是将 foreach 从 <tr> 移动到 <tbody>，因为 foreach 使用声明为模板的元素的子元素进行复制。

<table data-bind="foreach: coas" style="width: 100%">
                <thead>
                    <tr><th colspan="5"><span data-bind="text: coaname">COA NAME</span></th></tr>
                    <tr>
                        <th style="width: 20%">date</th>
                        <th style="width: 20%">account</th>
                        <th style="width: 20%">debet</th>
                        <th style="width: 20%">credit</th>
                        <th style="width: 20%">saldo</th>
                    </tr>
                </thead>
                <tbody data-bind="foreach: coaDetails">
                    <tr>
                        <td data-bind="text: date">### date ###</td>
                        <td data-bind="text: coa">### account ###</td>
                        <td data-bind="text: debet">### debet ###</td>
                        <td data-bind="text: credit">### credit ###</td>
                        <td data-bind="text: saldo">### saldo ###</td>
                    </tr>
                </tbody>
            </table>