knockout.js 数据中的嵌套 foreach 显示但未正确显示
Nested foreach in knockout.js data show up but not displaying right
我想显示来自 ajax 的数据 table using knockout。数据显示,但显示不正确。我不知道如何解决这个问题。我已经阅读了这里的大部分 post,但仍然找不到问题所在。
预期结果
账户 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
}
]
}
]
知道为什么吗?
我认为您需要做的就是将 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>
我想显示来自 ajax 的数据 table using knockout。数据显示,但显示不正确。我不知道如何解决这个问题。我已经阅读了这里的大部分 post,但仍然找不到问题所在。
预期结果
账户 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
}
]
}
]
知道为什么吗?
我认为您需要做的就是将 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>