KnockoutJS：可观察到的 foreach 绑定数组

Question

这是我的数据模型（调查）：

{ 
 "name" : "x",
 "questions" : [ .... ]
}

这是我的视图模型：

survey : ko.observable(undefined)

这是我的数据绑定标签：

<ol data-bind="foreach: data.survey.questions">

它不起作用。如果我像这样更改绑定，它会起作用：

<ol data-bind="foreach: data.survey().questions">

问题是在 foreach 绑定中还有另一个 foreach 循环遍历问题的可能答案：

<div data-bind="foreach: answers">

我没有找到任何方法来使这个与我当前的设置一起工作。基本上我认为问题在于您需要使用observableArray，但我想在可观察对象内的数组上循环。

任何人都可以提出一种方法来使这种双 foreach 工作吗？谢谢！

Answer 1

Knockout observables 是函数。 To read the observable’s value, you need to call the observable with no parameters。因此，您需要 survey() 来访问具有 questions 属性的内部对象。

---

我不确定为什么您的内部 foreach 绑定不起作用。我猜这是因为您将survey 设置为undefined。但由于外部foreach 正在工作，它不可能是那样。你提到，“我认为问题是你需要使用 observableArray”。那没有必要。 Knockout 的默认绑定处理程序，包括foreach 绑定，在内部使用ko.utils.unwrapObservable() 处理此问题。唯一的区别是，如果它是observableArray，将来对数组的任何更改都将反映在 UI 上。但如果它是一个常规数组，那么 UI 将不会更新。

所以，如果每个question 中有一个名为answers 的数组，那么它应该可以工作。这是一个有效的sn-p。

var data = {
  survey: ko.observable({
    "name": "x",
    "questions": [{
      text: "Who let the dogs out?",
      answers: [
       {number: 1,text: "Cats"}, 
       {number: 2,text: "Baha Men"}
      ]
    }, {
      text: "What does the fox say?",
      answers: [
       {number: 1,text: "Woof Woof"}, 
       {number: 2,text: "Ring-ding-ding-dingeringeding"}, 
       {number: 3,text: "Meow Meow"}
      ]
    }]
  })
};

ko.applyBindings(data)

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<ol data-bind="foreach: survey().questions">
  <li>
    <span data-bind="text: text"></span>
    <br> Answers:

    <ul data-bind="foreach: answers">
      <li data-bind="text:text">
      </li>
    </ul>
  </li>
</ol>

Here's a fiddle for testing