observableArray未通过完整数组传递更新

Posted 2021-05-05

我有一个填充的observableArray，后来我需要用它对应的UI更新替换它里面的数组。它没有更新任何东西。

JS

showFirst: ko.observable(true);
orders: ko.observableArray();
orders(firstArray);

function changeArray(){orders(secondArray); showFirst(false);}

html

<!-- ko if: showFirst() -->
<!-- ko foreach: orders() -->
    <p data-bind="text: property1"></p>
<!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: showFirst() -->
<!-- ko foreach: orders() -->
    <p data-bind="text: property2"></p>
<!-- /ko -->
<!-- /ko -->

即使我可以检查订单已更新的ko扩展，但它仍在尝试检查property1。

答案

你可以这样做：

showFirst: ko.observable(true);
orders: ko.observableArray();
orders(firstArray);

function changeArray(){orders(secondArray); showFirst(false);}

<!-- ko foreach: orders() -->
    <p data-bind="text: showFirst() ? property1 : property2"></p>
<!-- /ko -->

我们的想法是在绑定中使用三元运算符。

另一答案

[应该是评论，但后来我无法共享此代码。]

我无法重复这一点。看看下面发生了什么，看看它是否有帮助。

var model={
  showFirst: ko.observable(true),
  orders: ko.observableArray([
    {property1:"p1",property2:"p2"},
    {property1:"p11",property2:"p22"}]),
  triggeredByAClick:function(){
    this.orders([
      {property1:"pp1",property2:"pp2"},
      {property1:"pp11",property2:"pp22"}]); 
    this.showFirst(false);
  }
}

ko.applyBindings(model);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<!-- ko if: showFirst() -->
<!-- ko foreach: orders() -->
    <p data-bind="text: property1"></p>
<!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: showFirst() -->
<!-- ko foreach: orders() -->
    <p data-bind="text: property2"></p>
<!-- /ko -->
<!-- /ko -->
<button data-bind="click:triggeredByAClick">click</button>

以上是关于observableArray未通过完整数组传递更新的主要内容，如果未能解决你的问题，请参考以下文章

带有模板和 foreach 的 KnockoutJS observableArray

observableArray 和 foreach 绑定的内存泄漏

knockoutJS-04之observableArray监控数组

遍历数组，并将子 JSON 转换为 observablearray？

ObservableArray 中的第一个数组项

循环遍历数组，并将子JSON转换为observablearray？