3

첫 페이지에서 '취소'를 클릭하면됩니다. 괜찮습니다. 그러나 이 '두 번째 페이지'로 이동하면 '취소'가 작동하지 않습니다. 이 경우 라우터는 응용 프로그램을 ""경로로 리디렉션합니다. 이 리디렉션을 방지해야합니다.Backbone.js에서 라우팅을 방지하는 방법은 무엇입니까?

"취소"- 숨기기 링크, "두 번째 페이지가"- 뷰 만들기 두 번째 페이지

<script type="text/html" id="template"> 
    <a href="#" class="cancel">Cancel</a> 
    <a href="#second">Second page</a> 
</script> 

<div id="container"></div>  

<script> 
var View = Backbone.View.extend({ 

    template: $('#template').html(), 

    events: { 
     "click .cancel": "cancel" 
    }, 

    cancel: function() { 
     this.$el.hide(); 
    }, 

    render: function() { 
     this.$el.html(this.template); 
     return this; 
    } 
}); 

var AppRouter = Backbone.Router.extend({ 

    routes: { 
     "": "first", 
     "second": "second" 
    }, 

로 이동하고 난 당신이 취소 핸들러에서 false를 반환해야한다고 생각

links: function() { 
     var view = new View; 
     $('#container').html(view.render().el); 
    }, 

    second: function() { 
     this.links(); 
     $('#container').prepend("<h1>Second page</h1>"); 
    }, 

    first: function() { 
     this.links(); 
     $('#container').prepend("<h1>First page</h1>"); 
    } 

}); 

$(document).ready(function() { 
    app = new AppRouter; 
    Backbone.history.start(); 
}); 
</script> 
+0

그냥 e.preventDefault() – rcarvalho

답변

3

컨테이너의 HTML을 대체 #에 탐색을 방지하기 위해 :

cancel: function (e) { 
     this.$el.hide(); 
     return false; 
    }, 

http://api.jquery.com/on/는 말한다 :

자동 event.stopPropagation()와에서는 event.preventDefault()를 호출하는 이벤트 핸들러에서 false를 반환.

+0

고마워, 작동합니다! – chessman

+0

그리고 이것이 작동하지 않는다면? 내 기능의 시작 부분에 나는 이미 e.preventDefault(); 하지만 라우터가 여전히 작동합니다. – SKuijers

+0

내가 작동하지 않는 이유를 알았습니다. 그것은 나의 견해가 엘을 정의하지 않았기 때문입니다. 예 : var view = Backbone.View.extend ({el : $ ("# anElement") 등}}); – SKuijers

2

또한이 답변에 처럼 재사용 가능한 방법으로 해시 havigation을 차단 해결할 수 :

Prevent navigating to another view if contents are unsaved

이 솔루션은 발사에서 백본 라우터 콜백을 방지하고,하지만 그것은 단지 실행은 할 수 해시가 변경된 후이 함수는 이전 해시 조각을 다시 설정하여 눈에 띄지 않게합니다.


이 exeact 문제
에 대한 또한 363,210

, , 당신은 단순히

<a>...</a> 
는 일반 HTML 앵커 태그 역할을

<a href="#">...</a> 

에서 변경할 수 있습니다 (예를 들어, 커서는 pointer으로 설정 됨) 어디에도 이동하지 않습니다

관련 문제