Question

我无法让嵌套的foreach工作。我有以下代码：

HTML - 代码段

<div data-bind='foreach: choice'>
    <p data-bind='foreach: id'>
        <input name="group1" type="radio" data-bind="attr: { id: $data }"/> <label  data-bind="attr: { for: $data} "> <span data-bind=" text: $data"> </span>
        </label>
    </p>
</div>

Javascript - Snippet

var questionModel = { 
question : ko.observable(), 
id: ko.observableArray(), 
choice: ko.observableArray() 
}

function startTest() {
    questionModel.question(questions[questionNo].question);
    var m = [];
    var i = [];

    var e = 0;
    while (e != 4) {
        m.push(choices[questionNo][e].choice);
        i.push(choices[questionNo][e].id);
        e++;
    }

    questionModel.choice(m);
    questionModel.id(i);
}

基本上我想要完成的是在单选按钮内生成每个选项，并使数组中的ID成为单选按钮和标签的ID。我已经成功地展示了它自己的选择。但是当我添加 data-bind ='foreach：id'＆amp; data-bind ='attr：{id：$ data}'，这就是事情停止工作的时候。我一直收到以下错误：

ReferenceError：无法处理绑定“foreach：function（）{return id}“消息：id未定义

免责声明：我已经测试了数据，阵列的所有内容都很好。

Answer 1

我很抱歉没有使用您的代码布局，我无法找到声明问题的位置或应用绑定的位置。我在这里使用一个简单的3项数据模型QuestionModel和一个包含它的简单视图模型做了一个例子。

数据模型只包含问题的ID，问题本身（title），然后是该问题的选择。循环遍历每个问题，然后是每个选项。如果您愿意，可以扩展值的选择或任何内容。只需创建一个对象数组。

[{ 
  "AnswerText": "Blue", 
  "AnswerValue" : "#0000FF"
}]

＆＃13;

function QuestionModel(data) {
  var self = this;

  self.Id = ko.observable(data.Id);
  self.Title = ko.observable(data.Title);
  self.Choices = ko.observableArray(data.Choices);

}

function ViewModel() {
  var self = this;

  self.Questions = ko.observableArray([
    new QuestionModel({
      "Id": 1,
      "Title": "What color are rabbits?",
      "Choices": ["Red", "Blue", "Green"]
    }),
    new QuestionModel({
      "Id": 2,
      "Title": "What color are dogs?",
      "Choices": ["Silver ", "Golden", "Striped"]
    }),
    new QuestionModel({
      "Id": 3,
      "Title": "What color are cats?",
      "Choices": ["white", "Black", "Orange"]
    })
  ]);

}
ko.applyBindings(new ViewModel());

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div data-bind="foreach: Questions">
  <span data-bind="text: Title"> </span>
  <div data-bind="foreach: Choices">
    <input type="radio" data-bind="value: $data, attr : {name : $parent.Id}" />
    <span data-bind="text: $data"></span>
    <br>
  </div>
</div>

＆＃13;

Answer 2

由于id不属于choice，您需要使用$parent来引用它：

data-bind="foreach: $parent.id"

https://jsfiddle.net/mbest/08gk7h4v/

Answer 3

您应该向模型添加一个类似{id: 1}的选项数组。然后你可以循环选择并引用id属性，如下所示：

var questionModel = {
  question: ko.observable(),
  choice: ko.observableArray()
}

function startTest() {
  questionModel.question(questions[questionNo].question);
  var m = [];
  var e = 0;
  while (e != 4) {
    var choice = choices[questionNo][e];
    m.push(choice);
    e++;
  }

  questionModel.choice(m);
}

<div data-bind="foreach: choice">
  <p>
    <input name="group1" type="radio" data-bind="attr: { id: id }" />
    <label data-bind="attr: { for: id }">
        <span data-bind="text: id"> </span>
        </label>
  </p>
</div>

嵌套的foreach不起作用

3 个答案: