3

計算値へのバインディングに関していくつか問題があります。テーブルにデータを表示し、いくつかのフィールドを合計しています。フッターには、これらのフィールドの合計と空の列、および合計のテキストを表示したいと考えています。値はフィールド内に格納され、参照されるフィールドの値が変更されると更新されますが、ビューには表示されません。私は 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つは、合計される値を計算し、それを観察可能なフィールドに保存する関数をトリガーすることです。これは正常に出力されるはずです。しかし、私はむしろこのように動作させ、この動作の原因を突き止めたいと思っています。

ありがとう。

4

1 に答える 1