我正在尝试为一个简单的网上商店制作一个概述页面。客户端可以转到下一页，但这不会重新加载整个文档，它只是触发了一个获取下一组产品的过程。我正在用knockout填充元素列表。网站加载了一个空的产品列表，并启动了一个初始获取过程。目前，这是用一个常量值完成的。但将来将取决于URL。
提取完成后ObservableArray的值会更新，但视图不会改变。如果我在提取后绑定视图模型，那么它会相应地更新视图，但我认为这不是首选方法。
我想问题出在我对图书馆惯例的理解上。我希望有人能给我讲得更清楚些。
我的代码如下：

let OverviewModel = function() {
    let self = this;
    self.products = ko.observableArray([]);
};
let OverviewController = function(model) {
    let self = this;
    ko.applyBindings(model);
    console.log("Model is bound"); // Prints
    self.fetchProducts = function (amount, page) {
        let url = new URL("/webshop/products", window.location.href)
        url.searchParams.append("amount", amount)
        url.searchParams.append("page", page)
        $.getJSON(url, function (data) {
            console.log(model.products()); // Prints: []
            model.products.removeAll();
            ko.utils.arrayPushAll(model.products, data);
            model.products.valueHasMutated();
            console.log(model.products()) // Prints: [Object { title: Lorem, ... }, ...]
        });
    };
};
let model = new OverviewModel();
let controller = new OverviewController(model);
controller.fetchProducts(20, 0);