-
21-12-2019 - |
题
我对计算值的绑定有一些问题。我在表中显示数据,并求出一些字段。在页脚中,我想显示这些字段和空列的总和,以及具有总计文本的字段。值存储在字段内,以及当引用的字段的值更改时更新,但它不会显示在视图中。我知道我用Ko有问题了。但我无法确定那将是什么。
html代码:
<table>
<caption><h4 class="pull-left">Caption</h4></caption>
<thead>
<tr data-bind="foreach: ColModel">
<th data-bind="text: Caption"></th>
</tr>
</thead>
<tbody data-bind="foreach: { data: model, as: 'row' }">
<tr data-bind="foreach: { data: $root.ColModel, as: 'col' }">
<td data-bind="text: row[col.Field], css: { hidden: col.InSum != false }">
</td>
<td data-bind="css: { hidden: col.InSum != true }">
<input type="number" step="any" class="input-small" data-bind="value:row[col.Field], valueUpdate: 'afterkeydown'" />
</td>
</tr>
</tbody>
<tfoot>
<tr data-bind="foreach: footmodel">
<td data-bind="text: Value">
</td>
</tr>
</tfoot>
</table>
.
iin我的js我有
clientViewModel.ColModel = ko.observableArray([
{
Caption: 'cap1',
InSum: false,
Field: 'FLD1'
},
{
Caption: 'cap2',
InSum: false,
Field: 'FLD2'
},
{
Caption: 'capsum1',
InSum: true,
Field: 'fldsum1'
},
{
Caption: 'capsum2',
InSum: true,
Field: 'fldsum2'
}
]);
clientViewModel.model = ko.observableArray();
clientViewModel.footmodel = ko.observableArray([
{
Value: '',
IsSum: false
},
{
Value: 'total',
IsSum: false
},
{
Value: '',
IsSum: true,
SumField: 'fldsum1'
},
{
Value: '',
IsSum: true,
SumField: 'fldsum2'
}
]);
.
ajax函数只是$ .ajax函数的小包装器,我们在项目中使用的函数来获取数据。
ajax('modelurl'),
'GET',
true,
function (data, status) {
$.each(data.Records, function (index, value) {
var observableValue = makeObservable(value, clientViewModel.ColModel);
clientViewModel.model.push(observableValue);
});
$.each(clientViewModel.footmodel(), function (index, value) {
if (value['IsSum']) {
clientViewModel.footmodel()[index]['Value'] = ko.computed(function () {
var sum = 0;
$.each(clientViewModel.model(), function (i, data) {
sum = parseFloat(sum) + parseFloat(data[value['SumField']]());
});
return sum.toString();
}, clientViewModel);
}
else
value['Value'] = ko.observable(value['Value']);
});
});
.
此外,Makeobservable用于制作可观察到的对象的字段。正如我发现的那样,应该可以观察到连接到计算的所有字段,因此更新可以触发。
function makeObservable(model, fields) {
var ret = {};
$.each(fields(), function (index, value) {
ret[value.Field] = ko.observable(model[value.Field]);
})
return ret;
}
.
对我来说是不知道的。脚模的可观察领域被打印出来,而计算则没有。 ClientViewModel的所有字段都是可观察到的,计算值,但它们没有打印出来。这是什么原因?
一个可能的解决方案,据我所知,可能是触发计算要求和的值的函数,并将其存储在可观察的字段中,这应该会更好地打印出来。但我宁愿以这种方式使其工作,并找出导致这种行为的原因。
谢谢。
解决方案
我猜你在ajax呼叫外部的init ko.applyBindings(...)
,这意味着
<tr data-bind="foreach: footmodel">
<td data-bind="text: Value">
</td>
</tr>
.
text: Value
绑定到原始空字符串,即使您用Value
替换ajax中的生成的内容,绑定系统不知道。
ko.computed(...)
绑定以强制敲除在Ajax之后重新解析绑定(整个表)。
html
<!-- ko ifnot: loading -->
<table> ... </table>
<!-- /ko -->
.
js
clientViewModel.loading = ko.observable(false);
// begin ajax
clientViewModel.loading(true); // ko removes the table from DOM
$.ajax({...,
success: function(data, status) {
//... built your ko.computed
},
complete: function() {
// finish ajax
clientViewModel.loading(false); // ko re-creates the table in DOM
}
});
. 不隶属于 StackOverflow