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是函数。 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将不会更新。

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

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

KnockoutJS：在可观察

1 个答案: