knockout.js - ko 计算未显示在 View 中

Question

我在绑定(bind)到计算值方面遇到一些问题。我在表中显示数据，并总结一些字段。在页脚中，我想显示这些字段的总和、空列以及带有总计文本的列。这些值存储在字段内部，并在引用字段的值发生更改时更新，但不会显示在 View 中。我知道我对 ko.compulated 做错了什么，但我无法确定那是什么。

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;
}

我不知道发生了什么。足部模型的可观察字段会被打印出来，而计算出来的字段则不会。 clientViewModel.model 可观察数组的所有字段都是可观察的，可以计算值，但不会打印出来。这是什么原因？

据我所知，一种可能的解决方案是触发计算要求和的值并将其存储在可观察字段中的函数，该函数应该可以正常打印出来。但我宁愿让它以这种方式工作，并找出导致这种行为的原因。

谢谢。

Answer 1

我猜你在ajax调用之外初始化了ko.applyBindings(...)，这意味着

<tr data-bind="foreach: footmodel">
    <td data-bind="text: Value"> 
    </td>
</tr>

text: Value 绑定(bind)到原始空字符串，即使您将 ajax 中 Value 的内容替换为 ko.compulated(... )，绑定(bind)系统不知道。

要修复此问题，请使用 if 绑定(bind)强制 knockout 在 ajax 之后重新解析绑定(bind)(整个表)。

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
  }
});