在淘汰赛中动态渲染控件并绑定到它们？答案

【问题标题】：Dynamically rendering controls and binding to them in knockout?在淘汰赛中动态渲染控件并绑定到它们？
【发布时间】：2017-07-21 11:00:15
【问题描述】：

我有一个通过 ajax 调用传递给我的淘汰视图模型的 JSON 有效负载。 payload的结构类似于：

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

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

[  
   {  
      "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>

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

【问题讨论】：

标签： javascript knockout.js

【解决方案1】：

我认为在这里使用templates 和if binding 是明智之举。

<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":[  
      {  
         "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：

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

【讨论】：