请求中的 Javascript、BackboneJS、oData 单引号

Question

我正在使用 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 时 - 以及在 IE9 模式下使用 IE10 时 - 它不起作用。

Answer 1

好吧，我认为这超出了我的范围，但最终它并没有，我自己修复了它。以防万一它可能对将来的任何人有所帮助，我将解释为什么这会发生在我身上。

过滤器对象中的值来自“select”，“select”在 Backbone View 中，而“select”填充了多个“option” View 。出于某种原因，我为我的选项 View 设置了一个模板，如下所示:

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

上面 HTML 中的换行符使得“选项”呈现在“选择”内，并在值的两边添加了额外的空间。 现在我尝试过的所有其他浏览器和 IE10 之间的区别似乎是在 IE10 中我的选项 View 中的那些空间不会被 jQuery 的 val() trim ，而在所有其他浏览器中，它们在阅读时会被 trim 带有 val() 的“select”的值。 这导致值两边的额外空间变成“+”号，就像 URL 中的所有其他空间一样，并且 这就是问题所在!单引号本身不需要转换成 %27，它应该可以工作，something I picked up from the answer on this question .

如果我像这样在一行中编写模板，我就不会有问题了:

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

无论如何，我只是一起摆脱了模板并将我的选项 View 更改为:

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

这就解决了所有问题，选项周围不再有多余的空格。

我想吸取的教训是，当您像这样使用 jQuery 读取选择框值时，IE10 不会去除值周围的空格:

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

在任何其他浏览器中，如果选项周围有空格，如'value'，它们将被自动 trim 并且value将为'value'，在IE10中，情况并非如此，value将为'value'。