javascript - 更改数组时 Knockout JS 不更新

Question

我知道这个问题已经被问过多次，但没有一个能回答我的问题。我有以下内容:我通过 JSON 将数据转换为 Javascript 并将其转换为二维数组。当我加载网站时，表格会按需要显示。现在，当我单击一个按钮(仅用于测试)时，它会更新数组中的一个值并将该数组记录在控制台中，我会在控制台中看到更改后的数组。问题是更改没有显示在表中。当我向数组添加一个值时，它会显示在表中。我做错了什么？

HTML:

<table id="sortsTable">
   <tbody data-bind="foreach: sorts">
   <tr>
     <td data-bind="text: $data.name"></td>
     <td data-bind="text: $data.ingName"></td>
   </tr>
   </tbody>
</table>
<button data-bind="click: addPerson">Add</button>

JS:

var sorts = ko.observableArray([]);

$(function() {
var request = new XMLHttpRequest();
var formData = new FormData();
var responseElements = [];
request.open("POST", "scripts.php", true);
formData.append("action", "getSorts");
request.onreadystatechange = function() {
    if (request.readyState == 4 && request.status == 200) {
        responseElements = JSON.parse(request.responseText);
        sorts = convertList(responseElements);
        ko.applyBindings(new AppViewModel(sorts));
    }
}
request.send(formData);

});

function convertList(response) {  //just the function to convert the json object to a more useful array
    var names = [];
    var ingredients = [];
    var sorts = [];
    for (var index = 0; index < response.length; index++) {
        var name = response[index]['name'];
        var ing = response[index]['ingName'];
        if (names.indexOf(name) == -1) {
            names.push(name);
        }
        if (ingredients.indexOf(ing) == -1) {
            var nameIndex = names.indexOf(name);
            if (ingredients[nameIndex] == undefined) {
                ingredients[nameIndex] = ing;
            } else {
                ingredients[nameIndex] = ingredients[nameIndex] + ", " + ing;
            }
        }
    }
    for (var i = 0; i < names.length; i++) {
        sorts[i] = {};
        sorts[i]['name'] = names[i];
        sorts[i]['ingName'] = ingredients[i];
    }
    return sorts;
}

function AppViewModel(data) {
    var self = this;
    self.sorts = data;
    self.addPerson = function() {
        console.log("click");
        self.sorts[0]["name"] = "test";  //doesn't update table
        //self.sorts.push({name: "qwer", ingName: "we"});  //works like expected
        console.log(self.sorts);
    };
}

谢谢。

Answer 1

observable 数组只监控哪些项目被添加到它，而不是项目本身，所以

self.sorts.push({name: "qwer", ingName: "we"});  //works like expected

之所以有效，是因为您正在获取要添加到其项中的可观察数组，但是

self.sorts[0]["name"] = "test";  //doesn't update table

不起作用，因为可观察数组无法知道其中的项目已更改。为此，数组中项目的属性需要是可观察的。

在 convertList 中切换到:

for (var i = 0; i < names.length; i++) {
    sorts[i] = {};
    sorts[i]['name'] = ko.observable(names[i]);
    sorts[i]['ingName'] = ko.observable(ingredients[i]);
}

而且它们必须通过调用可观察的 setter 方法来设置，如下所示:

self.addPerson = function() {
    console.log("click");
    self.sorts[0]["name"]("test");
    ...

顺便说一句，您这里似乎还有一些其他问题。您在第一行将 sorts 定义为可观察数组，但您用 convertList 的返回值覆盖它，这是一个普通数组，而不是可观察数组。

sorts = convertList(responseElements);
ko.applyBindings(new AppViewModel(sorts));

我会删除第一行并将排序创建为可观察数组

function convertList(response) {  //just the function to convert the json object to a more useful array
    var names = [];
    var ingredients = [];
    var sorts = ko.observableArray([]);
    ...