2

私は BackboneJS を使用しています。oData 対応の WebAPI からデータを取得するコレクションを持っています。データを取得する際に、oData $filter を使用していくつかの追加パラメーターを渡します。

次のようになります。

collection.fetch({
   data: $.param({ '$filter': 'Filter1 eq ' + filter.get('filter1') + 
                   ' and Filter2 eq ' + filter.get('filter2') }),
   //some more stuff...
})

私は基本的にウィザードを実行し、途中でこのフィルター モデルを構築しています。このフィルター モデルから得られるすべての値は、文字列値または空の文字列のいずれかです。フィルター モデルの get メソッドをオーバーライドして、適切な値を確実に取得できるようにしました。空でない場合は文字列値を一重引用符で囲み、空の場合は「null」という単語を含む文字列値を返します。

var Filter = Backbone.Model.extend({        
    get: function (attributes, options) {
        var value = Backbone.Model.prototype.get.call(this, attributes, options);
        if (value == '') return 'null';
        else return "'" + value + "'";
    }
});

私のモデルが次のようになっているとします。

{filter1: 'filter1', filter2: 'filter2'}

Chrome と Firefox でコレクションをフェッチすると、生成されるリクエストは次のようになります。

replacedapiurl?%24filter=Filter1+eq+%27filter1%27+and+Filter2+eq+%27filter2%27

これはまったく問題なく、Firefox と Chrome の両方でうまく機能します。私が抱えている問題は、IE10 ではこれが機能しないことです。何らかの理由で、生成されるリクエストは次のようになります。

replacedapiurl?%24filter=Filter1+eq+'+filter1+'+and+Filter1+eq+'+filter1+'

IE9 モードに設定すると、同じことが行われます。IE8 モードに設定すると、突然動作し始めます。

EncodeURI()、EncodeURIComponent()、escape() を使用して、オーバーライドされた get メソッド内と $.param ビット内の両方で、一重引用符の前に「\」を追加してみました。しかし、何も機能しません。「\」を追加しても何も起こらず、すべてのエンコーディングは、追加された「+」記号を次のようにエンコードするだけです。

replacedapiurl?%24filter=Filter1+eq+'%2520filter1%2520'+and+Filter1+eq+'%2520filter1%2520'

これも私が求めているものではありません。

なぜこれが起こっているのか誰にも分かりますか？この動作で IE ブラウザのバージョンに違いがあるのはなぜですか? どうすれば修正できますか？一重引用符を '%27' に変換する必要があります。できればブラウザ固有のコードを記述する必要はありません。

編集: 誰かに IE9 でチェックしてもらいましたが、それは正常に動作するため、動作しないのは IE10 を使用している場合 (および IE10 を IE9 モードで使用している場合) だけです。

4

1 に答える 1

1

わかりました、これは私を超えていると思いましたが、最終的にはそうではなく、自分で修正しました. 将来誰かに役立つかもしれない場合に備えて、なぜこれが私に起こったのかを説明します.

フィルター オブジェクトの値は「select」から取得されます。「select」はバックボーン ビュー内にあり、select には多数の「option」ビューが取り込まれます。何らかの理由で、オプション ビューのテンプレートを次のように設定しました。

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

上記の HTML の改行により、「オプション」が「選択」内にレンダリングされ、値の両側に余分なスペースが追加されました。私が試した他のすべてのブラウザーと IE10 の違いは、IE10 では、オプション ビューのこれらのスペースが jQuery の val() によってトリミングされないのに対し、他のすべてのブラウザーでは、値を読み取るときにトリミングされることです。 val() を使用した「選択」。これにより、URL 内の他のすべてのスペースと同様に、余分なスペースが値の両側で「+」記号に変わり、それが問題でした! 一重引用符自体は %27 に変換する必要はありません。どちらの方法でも機能するはずです。この質問の回答から得たものです。

次のようにテンプレートを 1 行で記述していれば、問題は発生しなかったでしょう。

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

とにかく、テンプレートをまとめて取り除き、オプション ビューを次のように変更しました。

var optionView = Backbone.View.extend({
    tagName: "option",
    render: function () {
        this.$el.html(this.model.get('value'));
    }
});

これですべてが修正され、オプションの周りに余分なスペースがなくなりました。

学んだ教訓は、次のようにjQueryで選択ボックスの値を読み取るときに、IE10が値の周りのスペースを取り除かないということだと思います:

var value = $('#id').val();

他のブラウザーでは、オプションが「値」のようにスペースで囲まれている場合、それらは自動的にトリミングされ、値は「値」になります。IE10 ではそうではなく、値は「値」になります。

于 2012-12-17T07:22:51.867 に答える