KnockoutJS：foreach绑定数组内部可观察(KnockoutJS: foreach binding array inside observable)

编程入门行业动态更新时间:2024-10-24 04:50:55

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

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

这是我的viewModel：

survey : ko.observable(undefined)

这是我的数据绑定标记：

它不起作用。如果我改变这样的绑定它是有效的：

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

我没有找到任何方法使这个使用我当前的设置。基本上我认为问题是你需要使用observableArray但我想在一个observable内部循环一个数组。

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

This is my data model (a survey):

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

This is my viewModel:

survey : ko.observable(undefined)

This is my data-bind tag:

It doesn't work. It works if I change the binding like this:

The problem is that inside the foreach binding there's another foreach looping through the possible answers to the questions:

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.

Can anyone suggest a way to make this double foreach work? Thanks!

最满意答案

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

我不确定为什么你的内部foreach绑定不起作用。我猜这是因为你将survey设置为undefined 。但由于外围的foreach工作，它不可能。你提到， “我认为问题在于你需要使用observableArray” 。这不是必要的。 Knockout的默认绑定处理程序，包括foreach绑定，通过使用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> 
  
 
 
 这是测试的小提琴 
Knockout observables are functions. To read the observable’s value, you need to call the observable with no parameters. Hence you need the survey() to access the inner object which has questions property. 
 
I'm not sure why your inner foreach binding isn't working. I would guess it's because you are setting survey to undefined. But since the outer foreach is working it couldn't be that. And you mentioned, "I think the problem is that you need to use an observableArray". That's not necessary. Knockout's default binding handlers, including the foreach binding, internally handle this by using 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. But if it's a regular array, then the UI won't be updated.  
So, if there is an array called answers within each question, then it should work. 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> 
  
 
 
Here's a fiddle for testing