Question

我有一个填充的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。

Answer 1

您可以这样做：

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 -->

这个想法是在绑定中使用三元运算符。

Answer 2

[应该是注释，但之后我无法分享此代码。]

我无法对此进行复制。看看下面发生了什么，看看是否有帮助。

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不会随着传递的完整数组而更新

2 个答案: