1

私はクイズ/調査アプリケーションを持っていますが、knockoutjs を使用してドロップダウン リストを作成する際に問題があります。

このフィドルを Firefox (または Chrome) で確認してから、Internet Explorer 9 (または IE8、または IE7... ノックアウトは IE6+ と互換性があると言っていますが、明らかに IE は私のシナリオでいくつかの問題を引き起こします) で試してください。

Firefox と Chrome では、私の jsfiddle の例は機能しますが、Internet Explorer では機能しません。thab 1 の最後の質問「どこに住んでいますか?」を参照してください。タブ 2 の「好きなスポーツは?」ドロップダウンは IE では設定されません。

$parent で何かがうまく機能していないか、$parent.ParticipantAnswer == null が IE で認識されていないのではないかと思います。デバッグしようとしましたが、明らかに原因が見つからなかったので、ここにいます。

tab1 と tab2 の両方で、オプションは入力されていないため、これら 2 つのテンプレートが呼び出されるコードは次のとおりです。

<!-- 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 はコメントを確認したり、コメントを処理したりする機会がありません。あなたの最善の策の 1 つは、repeatバインドを使用することです: https://github.com/mbest/knockout-repeat。これは基本的にforeach、コンテナではなく、繰り返される要素にアタッチすることで実行できます。

于 2013-08-23T12:14:51.147 に答える