在 Knockout 中更改可观察数组后刷新 UI答案

【问题标题】：refresh UI after change observable array in Knockout在 Knockout 中更改可观察数组后刷新 UI
【发布时间】：2014-01-22 12:39:32
【问题描述】：

我在 html tbody data-bind="foreach:contacts"
和 Knockout 视图模型

var viewModel = function () {
    $this = this;
    $this.contacts = ko.observableArray();

$this.nextPage = function () {

        $.ajax({
            url: "/api/AddressBook",
            data: { pagesize: pageSize, currentpage: CPage },
            type: "GET"
        }).done(function (data) {

            var myKoObservableArray = $this.contacts; 

            myKoObservableArray.push(null);
            myKoObservableArray.push(data);

           alert(data[0].Name);

        });
}

$(document).ready(function () {
    $.ajax({
        url: "/api/AddressBook",
        data: { pagesize: 10,currentpage: 0 },
        type: "GET"
    }).done(function (data) {

        var vm = new viewModel();
        vm.contacts(data);
        ko.applyBindings(vm);
    });
});

第一次加载页面时，表格由来自 $(document).ready 的 ajax 调用填充。当我从 UI 调用 nextPage 时，我进行 ajax 调用并 alert(data[0].Name) 显示返回的数据数组中的第一个元素。是每次从服务器返回的不同集合。问题是我在 UI 中的表在从第二个（和下一个）ajax 调用更改“联系人”可观察数组后没有改变。

【问题讨论】：

标签： knockout.js ko.observablearray

【解决方案1】：

是的，您可以为您的数组调用 valueHasMutated 函数：

yourArray.valueHasMutated();

如果第一次没有帮助，您可以进行“脏”刷新：

self.refresh = function(){
    var data = self.array().slice(0);
        self.array([]);
        self.array(data);
    };

这是工作小提琴：http://jsfiddle.net/vyshniakov/FuEy6/2/

【讨论】：

【解决方案2】：

myKoObservableArray.push(null);

你为什么要这样做？

myKoObservableArray.push(data);

这会在末尾添加一个元素 contacts，即对您收到的整个数组的单个引用。

听起来您想用您从 ajax 调用中获得的数组替换 contacts 的内容。如果是这样，只需将这两个语句替换为

$this.contacts(data);

如果您想将新项目附加到现有项目，而不是使用

ko.utils.arrayForEach(data, function(v) {$this.contacts.push(v)});

【讨论】：

我尝试了 $this.contacts(data) 和 alert(data[0].FirstName)，并且每次调用 ajax 方法后，警报都会显示正确的新名称。问题是表的 UI 没有更新。我试过这个 ryanrahlf.com/… 但 UI 又没有更新

【解决方案3】：

问题是脚本文件被包含两次 - 在页眉和页面底部。这可能会破坏绑定。

【讨论】：