koは見て表示されていない
-
21-12-2019 - |
質問
計算値へのバインドに関していくつかの問題があります。私はテーブルのデータを表示し、いくつかのフィールドを合計しています。フッターでは、それらのフィールドと空の列の合計と合計のテキストを表示したいです。参照フィールドの値が変わると、フィールド内に格納されている値がフィールド内に格納されますが、ビューに表示されません。私はko.comを使ったことを間違ったことを知っていますが、私はそれが何であるかを特定することはできません。
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>
.
私の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']);
});
});
.
また、オブジェクトのフィールドを観測できるようにするためにメービステーブを使用できます。私が見つけたように、計算されたすべてのフィールドは観察可能であるため、更新はトリガーすることができます。
function makeObservable(model, fields) {
var ret = {};
$.each(fields(), function (index, value) {
ret[value.Field] = ko.observable(model[value.Field]);
})
return ret;
}
.
何が起こっているのは私には知られていません。足型の観察可能なフィールドは、計算されていない間印刷されます。 ClientViewModel.Modelが観察可能なすべてのフィールドが観察可能で、値は計算されますが、プリントアウトされません。その理由は何ですか?
1つの可能な解決策は、それを見る限り、合計される値を計算し、それを観察可能なフィールドに格納する関数をトリガすることができます。しかし、私はむしろこのように働き、この行動を引き起こすことを見つけてください。
ありがとう。
解決
Ajax呼び出しの外側のinit ko.applyBindings(...)
を推測します。これは
<tr data-bind="foreach: footmodel">
<td data-bind="text: Value">
</td>
</tr>
.
text: Value
は元の空の文字列にバインドされています。
それを修正するには、Value
バインディングを使用して、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
}
});
.