3 레벨은 KnockoutJS에서 foreach를 중첩합니다.

Question

저는 Knockout에서 관리 할 3 레벨의 데이터가 있습니다. 그러나 새 데이터를 추가 할 때 첫 번째 2 개만 업데이트됩니다. 세 번째 레벨은 업데이트되지 않습니다.

여기에 지금까지 내 코드입니다 : http://jsfiddle.net/26medias/Zy8Wr/

은 퀴즈 답변을 포함 각각 포함하는 질문이 있습니다. 퀴즈를 추가 할 수 있지만 질문을 추가 할 수는 있지만 답변이 업데이트되지 않습니다.

내가 온라인으로 찾은 모든 예제와 stackoverflow는 2 레벨의 데이터에만 적용됩니다.

어떻게하면 [+] 버튼이 작동하는지 관찰 할 수있는 세 번째 레벨을 가질 수 있습니까?

감사합니다.

Answer 1

각 중첩 할 수있는 중첩 수준에 대해 각 수준을 관찰 가능하게 매핑해야합니다.

관찰 가능한 일련의 질문에만 매핑되었습니다. 그러나 질문에있는 각 대답도 매핑해야합니다. 당신이 텍스트를 퀴즈와 질문의 이름을 편집하고 답변 할 수 있도록하려면 나타납니다 때문에

scope.quizzes = ko.observableArray(
    ko.utils.arrayMap(quizzes, function(quiz) { 
     return { 
      name:  quiz.name, 
      questions: ko.observableArray(quiz.questions) // not far enough 
     }; 
    }) 
); 

, 당신은 관찰 할뿐만 아니라 이러한 속성을해야한다.

scope.quizzes = ko.observableArray(
    ko.utils.arrayMap(quizzes, function(quiz) { 
     return { 
      name:  ko.observable(quiz.name), 
      questions: ko.observableArray(
       ko.utils.arrayMap(quiz.questions, function (question) { 
        return { 
         text: ko.observable(question.text), 
         answers: ko.observableArray(
          ko.utils.arrayMap(question.answers, function (answer) { 
           return { 
            text: ko.observable(answer.text), 
            valid: ko.observable(answer.valid) 
           }; 
          }) 
         ) 
        }; 
       }) 
      ) 
     }; 
    }) 
); 

이것은 많은 것처럼 보일 수 있지만 이러한 개체에 바인딩 할 수 있어야합니다. mapping plugin을 사용하면이 과정을 더 쉽게 만들 수 있으며이 매핑이 사용자 대신 수행됩니다.

scope.quizzes = ko.mapping.fromJS(quizzes); 

Answer 2

귀하의 답변 배열은 단지 observableArray가 아닌 배열 일뿐입니다. 배열을 ko.observableArray로 정의해야합니다. 코드 스 니펫 bnelow가 모든 레벨의 배열에 대해 observableArray를 사용합니다.

var initialData = ko.observableArray([ 
    { 
     name: "Quiz #1", 
     questions: ko.observableArray([ 
      { 
       text: "Question #1.1?", 
       answers: ko.observableArray([ 
        { 
         text:  "Yes", 
         valid: true 
        }, 
        { 
         text:  "No", 
         valid: false 
        } 
       ]) 
      },