KnockoutJS：foreach绑定数组内部可观察

Question

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

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

这是我的viewModel：

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但我想在一个observable内部循环一个数组。

任何人都可以建议一种方法来使这个双重foreach工作？ 谢谢！

Answer 1

Knockout observables是函数。 要读取observable的值，需要调用没有参数的observable 。 因此，您需要使用survey()来访问具有questions属性的内部对象。

---

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

所以，如果在每个question都有一个名为answers的数组，那么它应该可行。 这是一个工作片段。

 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> 

这是测试的小提琴