Knockout bind inested collection

Question

У меня есть следующий ViewModel с Вопросы коллекция, которая содержит Я пытался связать, но только PoolText и элементы первой коллекции- Вопросы выглядят правильно. Ответы коллекции пропустить на всех. Фактически в примере используется модель Javasctip, которая должна отображаться. Мой ViewModel, как это:

function VM(){ 
    this.PoolText = ko.observabe(); 
    this.Qusetions = ko.observableArray([]); 
    this.Qusetions.Answers = ko.observableArray([]);//is this correct??? 
} 

function Question(){ 
this.ID = ko.observabe(); 
this.QuestionText = ko.observabe(); 
this.Answers = ko.observableArray([]); 
} 

function Answer(){ 
this.AnswerText = ko.observabe(); 
this.Points = ko.observabe(); 
} 

var vm = { 
 
    "ID": 1, 
 
    "PoolText": "Pool1", 
 
    "Questions": [{ 
 
    "ID": 2, 
 
    "QuestionText": "Q1", 
 
    "Answers": [{ 
 
     "ID": 3, 
 
     "AnswerText": "A1", 
 
     "Points": 1.00 
 
    }, { 
 
     "ID": 4, 
 
     "AnswerText": "A2", 
 
     "Points": 1.00 
 
    }, { 
 
     "ID": 5, 
 
     "AnswerText": "A3", 
 
     "Points": 1.00 
 
    }] 
 
    }, { 
 
    "ID": 3, 
 
    "QuestionText": "Q2", 
 
    "Answers": [{ 
 
     "ID": 7, 
 
     "AnswerText": "AA1", 
 
     "Points": 1.00 
 
    }, { 
 
     "ID": 8, 
 
     "AnswerText": "AA2", 
 
     "Points": 1.00 
 
    }, { 
 
     "ID": 9, 
 
     "AnswerText": "AA3", 
 
     "Points": 1.00 
 
    }] 
 
    }, { 
 
    "ID": 4, 
 
    "QuestionText": "Q3", 
 
    "Answers": [] 
 
    }] 
 
} 
 
ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<div data-bind="text: PoolText"></div> 
 
<ul data-bind="foreach: Questions"> 
 
    <li data-bind="text: QuestionText"> 
 
    <ul data-bind="foreach: Answers"> 
 
     <li data-bind="text: AnswerText"></li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 1

Проблема с вашим HTML структурой. Вы имеете следующую структуру для внутренних элементов:

<li data-bind="text: QuestionText"> 
    <ul data-bind="foreach: Answers"> 
     <li data-bind="text: AnswerText"></li> 
    </ul> 
</li> 

Вы используете text связывания на вашем внешнем теге, так что все, что находится внутри этого тега переписывается с результатом от этой привязки. Это означает, что внутренний foreach никогда не выполняется, поскольку он перезаписывается. Чтобы исправить это, вам необходимо отделить первое связывание от тега li, например, например:

<ul data-bind="foreach: Questions"> 
    <li> 
     <span data-bind="text: QuestionText" ></span> 
     <ul data-bind="foreach: Answers"> 
      <li data-bind="text: AnswerText"></li> 
     </ul> 
    </li> 
</ul>