javascript - knockout JS : foreach binding array inside observable

Question

这是我的数据模型(一项调查):

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

这是我的 View 模型:

survey : ko.observable(undefined)

这是我的数据绑定(bind)标签:

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

这是行不通的。如果我像这样更改绑定(bind)，它会起作用:

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

问题是在 foreach 绑定(bind)内部有另一个 foreach 循环遍历问题的可能答案:

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

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

任何人都可以建议一种方法来使这个 double foreach 工作吗？谢谢!

Answer 1

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

---

我不确定为什么您的内部 foreach 绑定(bind)不起作用。我猜这是因为您将 survey 设置为 undefined。但由于外部 foreach 正在工作，所以不可能是那样。你提到，“我认为问题在于你需要使用 observableArray”。那没有必要。 Knockout 的默认绑定(bind)处理程序，包括 foreach 绑定(bind)，通过使用 ko.utils.unwrapObservable() 在内部处理此问题.唯一的区别是，如果它是一个 observableArray，以后对该数组的任何更改都会反射(reflect)在 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>

Here's a fiddle for testing