Backbone: url에 공백이 있는 탐색()은 Firefox에서 {trigger:false}인 경우에도 경로를 트리거합니다.

에 만든 2014년 11월 27일 · 8코멘트 · 출처: jashkenas/backbone

다음 예를 고려하십시오.

$(function(){
var AppRouter = Backbone.Router.extend({

    routes: {
        '(count/:count)': 'home',
    },

    home: function(currCount) {
        var counter = 0;
        var thisObj = this;

        $("body").html($("<p>Click me</p>").on('click', function() {
            console.log("clicked "+counter);
            counter++;
            thisObj.navigate('count/'+counter, {trigger:false, replace: true});
        }));

        console.log('home route: '+currCount);    
    },
});

window.app = new AppRouter();
Backbone.history.start();
});

이것은 "home route: null"을 기록하고 "Click me"를 클릭할 때마다 "click #"을 기록해야 합니다.

이제 작은 수정을 가합니다. Navigation()에서 URL에 공백을 추가합니다.

thisObj.navigate('count/ '+counter, {trigger:false, replace: true});

다시 시도하면 "home route: #"도 기록되기 시작하고 카운터가 _세 번의 클릭 중 두 번_을 재설정한다는 것을 알게 될 것입니다.

이것은 1.1.2 릴리스에 있으며 최신 Firefox 33.1에서 테스트 중입니다. Chrome에서는 이 문제가 발생하지 않습니다. Chrome이 URL의 공백을 인코딩하는 작업을 수행하기 때문일 수 있습니다. 확실하지 않습니다.

나는 공백 문자가 처음부터 URL에 있어서는 안 된다는 것을 알고 있지만, 이 동작은 이상하고 최소한 문서화되어야 합니다. (즉, "navigate()는 공백(또는 기타 안전하지 않은 문자??)이 포함된 URL에서 예상대로 작동하지 않을 수 있습니다.")

이에 대한 쉬운 수정이 있는지 확실하지 않지만 적어도 이 버그를 문서화함으로써 다른 개발자들이 그것을 찾아내는 데 드는 시간을 절약할 수 있기를 바랍니다.

invalid

출처

chaimpeck

가장 유용한 댓글

여기 내가 발견한 것이 있습니다. Firefox에서 "this.location.href" 변수를 확인하면 변수의 모든 공백이 %20으로 인코딩됩니다. Chrome(및 아마도 IE)은 공백으로 둡니다. 탐색으로 이동할 때 "checkUrl()"이 "this.getFragment()"의 반환 값과 "this.fragment"를 비교하여 "this.getFragment()"를 호출할지 여부를 결정하기 때문에 이것은 Backbone의 문제입니다. loadUrl()", 일치하지 않는 경우. this.getFragment()는 Firefox의 공백(또는 해당 문제에 대한 인코딩) 대신 %20을 사용하여 this.location.href의 값을 반환합니다. this.fragment는 디코딩된 등가물을 반환합니다. this.fragment는 URL에서 encodeURI()를 사용하는지 여부에 관계없이 디코딩된 상태로 유지됩니다. "navigate()" 함수에서 this.fragment는 전달되는 URL에서 "this.decodeFragment()"를 호출하여 할당되기 때문입니다. 인코딩을 강제하려는 시도를 제거합니다.

따라서 this.fragment가 this.decodeFragment()의 사용으로 인해 항상 디코딩된 URL이고 URL에 encodeURI()가 변경할 문자(이 경우 공백)가 포함되어 있으면 반환된 값과 일치하지 않습니다. Firefox의 .getFragment(), Firefox는 this.location.href의 값을 인코딩하지만 다른 브라우저는 인코딩하지 않기 때문입니다. 이 두 값이 일치하지 않기 때문에 router.navigate의 트리거 매개변수가 true 또는 false인지 여부에 관계없이 this.loadUrl()이 checkUrl()에서 호출됩니다.

예비 수정(사전 테스트)은 "getHash()" 메서드의 반환 값을 다음과 같이 변경하는 것입니다.

return match ? this.decodeFragment(match[1].replace(pathStripper, '')) : '';

sjmiller85 에 2016년 09월 08일

👍6 ❤1

모든 8 댓글

안녕하세요 @chaimpeck입니다! 신고해 주셔서 감사합니다.

불행히도 위의 코드를 사용하여 재현할 수 없었습니다. 마스터 브랜치와 1.1.2 릴리스 모두에서 최신 Chrome 및 Firefox를 사용해 보았습니다. 내가 볼 수 있는 gist/bin/fiddle에 작업 예제를 게시해 주시겠습니까?

우리는 확실히 이전에 Firefox에서 특정 문자를 인코딩/디코딩하는 데 문제가 있었고 더 많은 문제가 있다고 의심하지 않습니다. : 스마일 :

braddunbar 에 2014년 11월 30일

실제로 이와 똑같은 문제를 보았지만 내 코드를 공유할 수 없습니다. 이것을 복제하기 위해 일부 테스트 코드를 조롱할 수 있는지 알아보겠습니다. 그러나 문제가 가장 확실한 브라우저 기반이라는 것을 발견했습니다. 모든 최신 버전의 IE와 Chrome은 잘 작동하지만 최소한 Firefox v31.5.0(묻지 마세요. 우리가 붙어 있는 인프라가 싫어요)에서는 트리거 옵션을 추가하지 않고도 확실히 트리거됩니다.

sjmiller85 에 2016년 09월 08일

예비 수정(사전 테스트)은 "getHash()" 메서드의 반환 값을 다음과 같이 변경하는 것입니다.

return match ? this.decodeFragment(match[1].replace(pathStripper, '')) : '';

sjmiller85 에 2016년 09월 08일

👍6 ❤1

마지막 버전에서 여전히 필요하므로 감사합니다!

Dahkon 에 2018년 03월 14일

URL에서 비표준 문자를 사용하려고 할 때도 동일한 문제가 있습니다. 제 경우에는 åäö(스웨덴 알파벳으로 된 문자)입니다. 최신 버전의 Chrome 및 Backbone.

sjmiller85의 솔루션은 저에게도 효과적이었습니다. 무리 감사!

Amsvartner 에 2018년 03월 19일

👍1

@sjmiller85 여기서 솔루션은 무엇이었습니까? 'pathStripper'에 무엇을 사용해야하는지 완전히 이해하지 못합니다. 이것은 정규식입니까?
편집 : 이것은 내 상황에서 작동합니다. https://github.com/jashkenas/backbone/pull/3955/files 참조
getHash: function (t) { var e = (t || this).location.href.match(/#(.*)$/); return e ? e[1] : "" }

Aggror 에 2018년 04월 04일

❤1 🎉1 😄1 👍1

문서에 따르면 @Aggror pathStripper는 해시 URL을 제거하기 위한 캐시된 정규식입니다.

// Cached regex for stripping urls of hash.
var pathStripper = /#.*$/;

따라서 솔루션과 동일하며 더 깔끔하고 효율적입니다. :)

Amsvartner 에 2018년 04월 25일

라우터에 동시에 동일한 해시를 추가하는 것을 피하고 초기 조건을 관리하십시오. 코드를 보여 드리겠습니다.
(초기 케이스를 처리하기 위해) (동시에 동일한 경로를 추가하는 것을 방지하기 위해)
if ( route.length === 1 || route[routes.length-1] === getHash() ) {
거짓을 반환합니다.
}
또 다른{
route.push(getHash())
};

abhiishere765 에 2018년 07월 16일

🎉1

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

Backbone: url에 공백이 있는 탐색()은 Firefox에서 {trigger:false}인 경우에도 경로를 트리거합니다.

가장 유용한 댓글

모든 8 댓글

관련 문제