SELECT 中的 Knockoutjs 容器较少模板，foreach OPTION 不适用于 Internet Explorer [英] knockoutjs container less template inside SELECT, foreach OPTION not working with Internet Explorer

问题描述

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

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

在 Firefox 和 Chrome 中 我的 jsfiddle 示例 有效，但不适用于IE浏览器.见第 1 题，最后一个问题你住在哪里?"在选项卡 2 中，最喜欢的运动?".下拉列表未在 IE 中填充.

我怀疑 $parent 有问题，或者 $parent.ParticipantAnswer == null 不被 IE 理解.我试图调试但显然没有找到原因，所以我在这里.

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

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

这里有 2 个模板:

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

我认为无容器模板会产生问题，但 this jsfiddle 适用于两个 Firefox和 IE.

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

解决方案

一般来说，无容器绑定在 Internet Explorer 中运行良好.但是，IE(至少在 10 之前)会在某些情况下删除注释，例如 select 元素内部.

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

I have an quiz/survey application and I'm having problems populating a dropdown list using knockoutjs.

Please check this fiddle with Firefox (or Chrome), then try it with Internet Explorer 9 (or IE8, or IE7... knockout says to be compatible from IE6+ but obviously IE gives some problems in my scenario).

In Firefox and Chrome my jsfiddle example works , but not with Internet Explorer. See in thab 1, last question "Where do you live?" and in tab 2, "Favorite sport?". The dropdown is not populated in IE.

I suspect that something is not working well with $parent, or $parent.ParticipantAnswer == null is not understood by IE. I tried to debug but obviously didn't find the cause, so here I am.

In both tab1 and tab2, the options are not populated, so here the code where these 2 templates are called:

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

And here the 2 templates:

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

I was thinking that a container less template would create problems, but this jsfiddle works on both Firefox and IE.

I really have no idea why it doesn't work with IE, I'm asking here for a valid fix and maybe an explanation of the cause, so we all can learn from it ;) Thank you.

解决方案

In general, containerless bindings work fine in Internet Explorer. However, IE (at least before 10) strips comments in certain scenarios like inside of select elements.

So, KO never sees the comments or has a chance to process them. One of your best bets is to use the repeat binding: https://github.com/mbest/knockout-repeat. This will basically let you do a foreach by attaching to the element to be repeated rather than a container.

这篇关于SELECT 中的 Knockoutjs 容器较少模板，foreach OPTION 不适用于 Internet Explorer的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！