嵌套的foreach将不起作用

问题描述：

我无法获得嵌套的foreach工作。我有以下代码：嵌套的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 - 摘录

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。我已经成功地显示了它自己的选择。但是，当我加入了数据绑定= '的foreach：身份证' & 数据绑定= 'ATTR：{ID：$数据}'，这是当事情停止工作。我不断收到错误如下：

ReferenceError: Unable to process binding "foreach: function(){return id }" Message: id is not defined

免责声明：我测试过的数据和一切为了阵列的罚款。

我觉得PROBL em是你正在创建两个不是真正嵌套的数组。 'id'是'choice'对象的一个属性。尝试删除段落标记'

'并查看它是否有效。 – styfle

@styfle单选按钮ID与上述解决方案的选择相同，这不是我正在寻找的。该id不是选择对象的属性。我正在寻找的是这个。我有选择阵列（'水'，'空气'，'土地'，'海'）和id阵列（'1'，'2'，'3'，'4'）。单选按钮应该是'水'，ID是'1'，下一个单选按钮应该是'空'，ID是'2'，等等。 – DanielleS

你想要4个输入：'水：1，空气：2，陆地：3，海：4'？或者你想要16个输入：'水：1，空气：1，陆地：1，海：1，水：2，空气：2，陆地：2，海：2 ...'？ – styfle

答

您应该为模型添加一个类似{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>

在此处查看文档：http://knockoutjs.com/documentation/foreach-binding.html – styfle

我认为你误解了我解释的所有内容或误解了代码。代码中已经有一个ID数组。我只需要将它们添加为单选按钮的ID。您的上述解决方案没有提供任何方法让选择本身显示为单选按钮的标签。注意到我在questionModel中有一个id数组。 – DanielleS

答

我不使用你的代码布局对不起，我找不到其中的问题被宣布或在绑定被应用。我在这里用一个简单的3项数据模型QuestionModel和一个包含它的简单视图模型做了一个例子。

数据模型只包含问题的ID，问题本身（title），然后是该问题的选项。遍历每个问题，然后循环每个选择。如果你愿意，你可以扩大价值的选择或其他。只需制作一组对象。

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

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());

<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>

答

由于id不是choice一部分，你需要使用$parent引用它：

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

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

嵌套的foreach将不起作用

相关推荐