[英]KnockoutJS: foreach binding array inside observable
This is my data model (a survey): 这是我的数据模型(调查):
{
"name" : "x",
"questions" : [ .... ]
}
This is my viewModel: 这是我的viewModel:
survey : ko.observable(undefined)
This is my data-bind tag: 这是我的数据绑定标记:
<ol data-bind="foreach: data.survey.questions">
It doesn't work. 它不起作用。 It works if I change the binding like this: 如果我改变这样的绑定它是有效的:
<ol data-bind="foreach: data.survey().questions">
The problem is that inside the foreach binding there's another foreach looping through the possible answers to the questions: 问题是,在foreach绑定中,还有另一个foreach循环遍历问题的可能答案:
<div data-bind="foreach: answers">
I didn't find any way to make this one work with my current setup. 我没有找到任何方法使这个使用我当前的设置。 Basically I think the problem is that you need to use an observableArray
but I want to loop on an array inside an observable instead. 基本上我认为问题是你需要使用observableArray
但我想在一个observable内部循环一个数组。
Can anyone suggest a way to make this double foreach work? 任何人都可以建议一种方法来使这个双重foreach工作? Thanks! 谢谢!
Knockout observables are functions. Knockout observables是函数。 To read the observable
's value, you need to call the observable with no parameters . 要读取observable
的值,需要调用没有参数的observable 。 Hence you need the survey()
to access the inner object which has questions
property. 因此,您需要使用survey()
来访问具有questions
属性的内部对象。
I'm not sure why your inner foreach
binding isn't working. 我不确定为什么你的内部foreach
绑定不起作用。 I would guess it's because you are setting survey
to undefined
. 我猜这是因为你将survey
设置为undefined
。 But since the outer foreach
is working it couldn't be that. 但由于外围的foreach
正在运作,所以不可能。 And you mentioned, "I think the problem is that you need to use an observableArray" . 你提到, “我认为问题是你需要使用observableArray” 。 That's not necessary. 这不是必要的。 Knockout's default binding handlers, including the foreach
binding, internally handle this by using ko.utils.unwrapObservable()
. Knockout的默认绑定处理程序(包括foreach
绑定ko.utils.unwrapObservable()
通过使用ko.utils.unwrapObservable()
内部处理它。 The only difference being, if it's an observableArray
, any changes to the array in the future will be reflected on the UI. 唯一的区别是,如果它是一个observableArray
,将来对阵列的任何更改都将反映在UI上。 But if it's a regular array, then the UI won't be updated. 但如果它是常规数组,那么UI将不会更新。
So, if there is an array called answers
within each question
, then it should work. 所以,如果在每个question
都有一个名为answers
的数组,那么它应该可行。 Here's a working snippet. 这是一个工作片段。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.