Question

我在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）显示返回数据数组中的第一个元素。是每次从服务器返回的不同集合。问题是，在第二次（和下一次）ajax调用中更改“contacts”可观察数组后，UI中的表没有更改。

Answer 1

myKoObservableArray.push(null);

你为什么这样做？

myKoObservableArray.push(data);

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

听起来你想要用你在ajax调用中获得的数组替换contacts的内容。如果是这样，只需用

替换这两个语句

$this.contacts(data);

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

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

Answer 2

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

yourArray.valueHasMutated();

如果第一次没有帮助你就可以做到“肮脏”。刷新：

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

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

Answer 3

问题是该脚本文件包含两次 - 在页眉和页面底部。这可能破坏了约束力。

在Knockout中更改observable数组后刷新UI

3 个答案: