1

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

请用 Firefox（或 Chrome）检查这个小提琴，然后用 Internet Explorer 9（或 IE8，或 IE7 ......淘汰赛说与 IE6+ 兼容，但显然 IE 在我的场景中给出了一些问题）。

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

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

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

我在想一个没有容器的模板会产生问题，但是这个 jsfiddle在 Firefox 和 IE 上都可以工作。

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

4

1 回答 1

4

通常，无容器绑定在 Internet Explorer 中运行良好。但是，IE（至少在 10 之前）会在某些情况下（例如select元素内部）去除注释。

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

于 2013-08-23T12:14:51.147 回答