計算値へのバインディングに関していくつか問題があります。テーブルにデータを表示し、いくつかのフィールドを合計しています。フッターには、これらのフィールドの合計と空の列、および合計のテキストを表示したいと考えています。値はフィールド内に格納され、参照されるフィールドの値が変更されると更新されますが、ビューには表示されません。私は ko.computed で何か間違ったことをしたことを知っていますが、それが何であるかを特定することはできません。
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']);
});
});
また、オブジェクトのフィールドを監視可能にするために makeObservable が使用されます。私が知ったように、計算に接続されているすべてのフィールドは監視可能である必要があるため、更新をトリガーできます。
function makeObservable(model, fields) {
var ret = {};
$.each(fields(), function (index, value) {
ret[value.Field] = ko.observable(model[value.Field]);
})
return ret;
}
何が起こっているのかは私にはわかりません。footmodel の監視可能なフィールドは出力されますが、計算されたフィールドは出力されません。clientViewModel.model 観測可能配列のすべてのフィールドは観測可能であり、値は計算されますが、出力されません。その理由は何ですか?
私が見る限り、考えられる解決策の1つは、合計される値を計算し、それを観察可能なフィールドに保存する関数をトリガーすることです。これは正常に出力されるはずです。しかし、私はむしろこのように動作させ、この動作の原因を突き止めたいと思っています。
ありがとう。