2012-12-17 4 views
2

BackboneJS를 사용하고 있습니다. oData를 사용하는 WebAPI에서 데이터를 가져 오는 콜렉션이 있습니다. 데이터를 가져 오는 동안 oData $ filter를 사용하여 몇 가지 추가 매개 변수를 전달합니다.Javascript, BackboneJS, oData 요청시 작은 따옴표 사용

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

나는 기본적으로 마법사를 실행하고 길을 따라이 필터 모델을 짓고 있어요 :

그것은이 같은 비트가 보인다. 이 필터 모델에서 나오는 모든 값은 문자열 값이거나 빈 문자열입니다. 필터 모델에서 get 메서드를 재정의하여 올바른 값을 얻도록했습니다. 비어 있지 않으면 문자열 값 주위에 작은 따옴표를 추가합니다. 비어 있으면 'null'이라는 단어가 포함 된 문자열 값을 반환합니다.

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

: 내가 크롬과 파이어 폭스에서 수집, 다음과 같이 보일 것입니다 생성 된 요청을 가져 오는 경우 지금

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

을 :

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 + "'"; 
    } 
}); 

내 모델은 다음과 같습니다 말 어느 것이 완벽하게 좋으며 파이어 폭스와 크롬 모두에서 훌륭하게 작동합니다. 내가 가지고있는 문제는 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을 사용할 때 작동하지 않습니다.

답변

1

좋아, 나는 이것이 나를 넘어선 줄 알았지 만 결국은 그렇지 않았고 나는 그것을 스스로 고쳤다. 앞으로 누군가에게 도움이 될 수있는 경우를 대비해이 일이 왜 저에게 일어나는지 설명하겠습니다.

필터 개체의 값이 '선택'에서 나오고 '선택'이 백본보기 내부에 있고 선택에 여러 가지 '옵션'보기가 채워집니다.

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

되는 HTML의 줄 바꿈

위의 '옵션'이 추가 된 여분의 공간 '선택'내부 렌더링 된 있도록 만들었 : 어떤 이유로 나는 그렇게처럼 내 옵션보기를 설정 템플릿을했다 가치의 양쪽에. 지금까지 시도한 다른 모든 브라우저와 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')); 
    } 
}); 

그리고 그 모든 것을 고쳤습니다. 더 이상 옵션 주위에 여분의 공백이 없습니다. 다른 브라우저에서

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

옵션에 공백이있는 경우, :

내가 배운 교훈은 당신이 그렇게 같은 jQuery로 선택 상자의 값을 읽을 때 IE10이 값에 공백을 제거하지 않는 것 같다 'value'와 같이 주위에서 자동으로 트리밍되며 값은 'value'입니다. IE10에서는 그렇지 않습니다. 값은 'value'입니다.

+0

어쨌든 OptionView의 용도는 무엇입니까? 그것은 어떤 행동도, 당신은 단지 배열이나 부모 템플릿의 옵션에 대한 값을 포함하는 개체를 통해 루프 수 없어. – andho

+0

사실, Marionette CompositeView와 ItemView를 가지고 놀고 있었는데 어떻게 작동하는지 보았습니다.하지만이 경우에는 옵션보기가 필요하지 않습니다. –