SELECT 中的 knockoutjs 容器少模板，foreach 选项不适用于 Internet Explorer

Question

我有一个测验/调查应用程序，但在使用 knockoutjs 填充下拉列表时遇到问题。

请使用 Firefox（或 Chrome）检查此小提琴，然后使用 Internet Explorer 9（或 IE8 或 IE7...淘汰赛说与 IE6+ 兼容，但显然 IE 在我的情况下会出现一些问题）。

在 Firefox 和 Chrome my jsfiddle example 中有效，但不适用于 Internet Explorer。参见第 1 题，最后一个问题“你住在哪里？”在标签 2 中，“最喜欢的运动？”。 IE 中未填充下拉列表。

我怀疑 $parent 不能正常工作，或者 IE 不理解 $parent.ParticipantAnswer == null。我尝试调试但显然没有找到原因，所以我在这里。

在 tab1 和 tab2 中，选项都没有填充，所以这里是调用这两个模板的代码：

<!-- ko if: AnswerTypeId == 2 -->
<select data-bind="attr: { name: Id, id: 'answerq' + Id }">
<option value="0"></option>
<!-- ko template: { name: 'option-template', foreach: Answers } -->                                                        
<!-- /ko -->
</select>
<!-- /ko -->

<!-- ko if: AnswerTypeId == 6 -->
<select data-bind="attr: { name: Id, id: 'answerq' + Id }">
    <option value="0"></option>
    <!-- ko template: { name: 'location-template', foreach: Answers } -->                                                        
    <!-- /ko -->
</select>
<!-- /ko -->

这里有 2 个模板：

<script type="text/html" id="option-template">

    <!-- ko if: $parent.ParticipantAnswer != null && $parent.ParticipantAnswer.AnswerId == $data.Id -->
    <option data-bind="text: Description, attr: { value: Id, selected: 'selected' }"></option>
    <!-- /ko -->

    <!-- ko if: ($parent.ParticipantAnswer == null || $parent.ParticipantAnswer.AnswerId != $data.Id) -->
    <option data-bind="text: Description, attr: { value: Id }"></option>
    <!-- /ko -->

</script>

<script type="text/html" id="location-template">

    <!-- ko if: $parent.ParticipantAnswer != null && $parent.ParticipantAnswer.AnswerInt == $data.Id -->
    <option data-bind="text: Description, attr: { value: Id, selected: 'selected' }"></option>
    <!-- /ko -->

    <!-- ko if: ($parent.ParticipantAnswer == null || $parent.ParticipantAnswer.AnswerInt != $data.Id) -->
    <option data-bind="text: Description, attr: { value: Id }"></option>
    <!-- /ko -->              

</script>

我认为无容器模板会产生问题，但 this jsfiddle 可以在 Firefox 和 IE 上运行。

我真的不知道为什么它不适用于 IE，我在这里要求一个有效的修复程序，也许是一个原因的解释，所以我们都可以从中学习；）谢谢。

Answer 1

一般来说，无容器绑定在 Internet Explorer 中运行良好。但是，IE（至少在 10 之前）会在某些情况下（例如 select 元素内部）剥离 cmets。

因此，KO 永远不会看到 cmets 或有机会处理它们。您最好的选择之一是使用repeat 绑定：https://github.com/mbest/knockout-repeat。这基本上可以让您通过附加到要重复的元素而不是容器来执行foreach。