嵌套的foreach將不起作用

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

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

免責聲明：我測試過的數據和一切爲了陣列的罰款。

Answer 1

您應該爲模型添加一個類似{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>

Answer 2

我不使用你的代碼佈局對不起，我找不到其中的問題被宣佈或在綁定被應用。我在這裏用一個簡單的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>

Answer 3

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

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

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