KO 计算重新计算但不更新 UI答案

【问题标题】：KO Computed recalculating but not updating UIKO 计算重新计算但不更新 UI
【发布时间】：2015-12-04 22:30:23
【问题描述】：

我对淘汰赛比较陌生，并且遇到了一些可观察的问题。这是我正在使用的一些淘汰赛的配对版本：

var model;
function viewModel(data) {
    var self = this;       
    self.favesData = ko.observableArray(data.User.Favorites);       
    self.splitRows = ko.computed(function () {
        var i = 0;
        var faveRows = [];
        var size = 2;
        while (i < self.favesData().length) {
            faveRows.push(self.favesData().slice(i, i += size));
        }
        return faveRows;
    });

    self.refresh = (function (data) {
        self.favesData(data.User.Favorites);
    });
}

function onComplete(result) {
    if (!model) {
        model = new viewModel(result);
        ko.applyBindings(new viewModel(result));
    } else {
        model.refresh(result);
    }
}

<table class="table-main link" data-bind="foreach: splitRows">
    <tr data-bind="foreach: $data">
        <td>
            <div class="link">
                <a href="#" data-bind="text: $data.Name">
                </a>
            </div>
        </td>
     </tr>
 </table>

我使用 ajax GET，它调用 onComplete。数据很好，在初始加载时一切都很好。然后我用新的输入调用相同的 ajax 函数，它开始正常工作 - 返回的数据不同，刷新更新 favesData，splitRows 重新计算，但 UI 显示永远不会改变。 splitRows 在重新计算时不应该更新绑定吗？我很困惑将新数据传递给 favesData 如何更新观察它的计算 observable，但计算 observable 不会更新 UI。

【问题讨论】：

标签： knockout.js

【解决方案1】：

在您的 onComplete 方法中，您没有将标记绑定到模型，而是绑定到 viewModel 的新实例，它应该如下所示。

ko.applyBindings(model);

正在对 UI 未使用的模型调用刷新

【讨论】：

【解决方案2】：

试试clearing the array and pushing the new items in，类似的东西；

 self.favesData.removeAll();
 data.User.Favorites.each(function(fav) { self.favesData.push(fav); });

看看能不能解决。我倾向于使用官方的knockout mapping plugin，它在从服务器“敲除”模型并刷新它们方面做得非常好。

所以通常你会通过在你的视图模型中做这样的事情来结束刷新

self.refresh = function(data) {
    ko.mapping.fromJS(data, {}, self);
}

重新绑定整个模型。

【讨论】：

我不明白为什么人们将数组中的项目推送到可观察数组中。只需将阵列放在那里。或者，如果您需要将其作为数组的单独副本，请使用 slice。
@RoyJ - 这就是 OP 在他们的刷新方法中似乎正在做的事情，但它不起作用。清除和重新设置可能会提供有关问题所在的线索。