Javascript 动态呈现控件并在敲除中绑定到它们？

我有一个JSON负载，它是通过对我的knockout viewmodel的ajax调用提供的。有效载荷的结构类似于：

{  
   "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"
                  }
               ]
            }
         ]
      }
   ]
}

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

在我的模板中，我有一个ForEach循环，它迭代所有类别，然后是第二个ForEach循环，它迭代该类别的所有问题。我需要根据每个问题的“controlType”动态创建输入、选择和文本区域，然后将它们绑定到ObservalArray，其结构类似于：

{  
   "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"
                  }
               ]
            }
         ]
      }
   ]
}

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

我创建了一个可以在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>

如何绑定和存储这些输入的结果？

我认为在这里与一起使用是明智的

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

另一个解决方案是拥有一系列答案和问题ID：

{  
   "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"
                  }
               ]
            }
         ]
      }
   ]
}