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'位于骨干视图中，而select则填充了许多'option'视图。出于某种原因，我为我的选项视图设置了一个模板，如下所示：

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

上面的HTML中的换行符使得'选项'在'select'中呈现，并在值的两侧添加了额外的空格。现在，我尝试过的所有其他浏览器和IE10之间的区别似乎是在IE10中，我的选项视图中的那些空格不会被jQuery的val（）修剪，而在所有其他浏览器中，它们在阅读时会被修剪掉带有val（）的'select'的值。这导致额外的空格在值的两边变成'+'符号，就像URL中的所有其他空格一样，是问题所在！单引号本身不需要转换为％27，它应该以任何方式工作，something I picked up from the answer on this question。

如果我将模板写成这样的一行，我就不会有问题：

<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();

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

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

1 个答案: