为啥 ko.ObservableArray 中的替换值没有更新我的视图？

Posted 2023-03-27

【中文标题】为啥 ko.ObservableArray 中的替换值没有更新我的视图？

【英文标题】：Why are the replaced values in ko.ObservableArray not updating my view?为什么 ko.ObservableArray 中的替换值没有更新我的视图？

【发布时间】：2021-08-07 15:32:21

【问题描述】：

我正在尝试为一个简单的网上商店制作一个概览页面。客户端可以转到下一页，但这不会重新加载整个文档，它只会触发对下一组产品的获取。 我正在用淘汰赛填充元素列表。该网站加载了一个空的产品列表，并开始了初始提取。目前这是使用一个常量值完成的，但将来将取决于 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);

【问题讨论】：

这个问题 (***.com/questions/36618682/…) 可以帮助你。

【参考方案1】：

不太确定什么不适合您，请参阅这个 sn-p，其中一切都按预期工作。我已经删除了 fetchProducts 中的一些代码，因为这不是一个简单的淘汰更新应该如何进行。 （以及一些用于数据检索的虚假 api 承诺）

const getProducts = (amount, page) =>
    new Promise((resolve, reject) => 
    if (isNaN(Number(amount)) || isNaN(Number(page))) 
      reject(new Error('Products not found'));
     
    setTimeout(() => resolve(['foo', 'bar']), 500);
  );

let OverviewModel = function() 
  let self = this;

  self.products = ko.observableArray([]);
  
  self.products.subscribe(products => console.log(products));
;

let OverviewController = function(model) 
  let self = this;

  ko.applyBindings(model);
  console.log("Model is bound"); // Prints

  self.fetchProducts = (amount, page) => getProducts(amount, page).then(data =>     
    model.products(data);
  );
;

let model = new OverviewModel();
let controller = new OverviewController(model);
controller.fetchProducts(20, 0);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<ul data-bind="foreach:  data: $root.products, as: 'product' ">
  <li data-bind="text: product"></li>
</ul>