동적으로 컨트롤을 렌더링하고 녹아웃으로 바인딩할까요?

Question

내 knockout viewmodel에 대한 ajax 호출에 의해 JSON 페이로드가 전달되었습니다. 나는 모든 범주에 걸쳐 반복 처리 foreach는 루프, 다음 두 번째 foreach 루프를 내 템플릿의 내부

{ 
    "categories":[ 
     { 
     "name":"Category 1", 
     "questions":[ 
      { 
       "id": 1, 
       "questionText":"Question?", 
       "controlType":"text" 
      }, 
      { 
       "id": 2, 
       "questionText":"Question?", 
       "controlType":"radiobutton", 
       "possibleAnswers":[ 
        { 
        "answerId":1, 
        "text":"Yes" 
        }, 
        { 
        "answerId":2, 
        "text":"No" 
        } 
       ] 
      } 
     ] 
     } 
    ] 
} 

그 해당 범주에 대한 모든 질문을 반복 : 페이로드의 구조는 유사하다. 동적으로 할 수있는 I 함수를 만들어

[ 
    { 
     "questionId":1, 
     "answerId":1 
    } 
] 

: 동적으로 각 질문의 "controlType"에 따라 입력, 선택하고, 텍스트 영역을 만든 다음 유사한 구조를 가진 observableArray 이러한 결합 할 필요가있어 foreach 내에서 HTML을 렌더링하지만 나머지는 어떻게 처리해야할지 모르겠다.

여기 데모 템플릿입니다 :

<div data-bind="foreach:categories"> 
    <h2 data-bind="text:name"></h2> 
    <div data-bind="foreach:questions"> 
     <span data-bind="text:questionText"></span> 
     <div data-bind="html:$parents[0].createControl($data)"></div> 
    </div> 
</div> 

내가 어떻게 결합하고 이러한 입력에서 결과를 저장할 것인가?

Answer 1

나는 if binding과 함께 templates을 사용하는 것이 현명 할 것이라고 생각합니다.

<div data-bind="foreach:categories"> 
    <h2 data-bind="text:name"></h2> 
    <div data-bind="foreach:questions"> 
     <span data-bind="text:questionText"></span> 
     <!-- ko if: controlType() == "radiobutton" --> 
      <div data-bind="template: { name: 'radio-template', data: $data }"></div> 
     <!-- /ko --> 
     <!-- ko if: controlType() == "other-type" --> 
      <div data-bind="template: { name: 'other-type-template', data: $data }"></div> 
     <!-- /ko --> 
     <!-- ... --> 
    </div> 
</div> 

이 같은 템플릿을 정의 할 수 있습니다 :

이

<script type="text/html" id="radio-template"> 
    <h3 data-bind="text: questionText"></h3> 
    <div data-bind="foreach:possibleAnswers"> 
     <!-- you html here --> 
    </div> 
</script> 

는 답변을 저장하기에 관해서는, 왜 질문에 selectedAnswer를 추가하지?

{ 
    "categories":[ 
     { 
     "answers": [ "questionId": 1, "answer": { "id": -1, "value": "" } ] 
     "name":"Category 1", 
     "questions":[ 
      { 
       "id": 1, 
       "questionText":"Question?", 
       "controlType":"text" 
      }, 
      { 
       "id": 2, 
       "questionText":"Question?", 
       "controlType":"radiobutton", 
       "possibleAnswers":[ 
        { 
        "answerId":1, 
        "text":"Yes" 
        }, 
        { 
        "answerId":2, 
        "text":"No" 
        } 
       ] 
      } 
     ] 
     } 
    ] 
} 

:

{ 
    "categories":[ 
     { 
     "name":"Category 1", 
     "questions":[ 
      { 
       "id": 1, 
       "questionText":"Question?", 
       "controlType":"text" 
      }, 
      { 
       "id": 2, 
       "questionText":"Question?", 
       "controlType":"radiobutton", 
       "possibleAnswers":[ 
        { 
        "answerId":1, 
        "text":"Yes" 
        }, 
        { 
        "answerId":2, 
        "text":"No" 
        } 
       ], 
       "selectedAnswer": -1 
      } 
     ] 
     } 
    ] 
} 

또 다른 해결책은 답변의 배열을 가지고 ID를 질문하는 것입니다