URL을 변경하지 않고 Backbone.js 라우팅

Question

Backbone.js 및 jQuery를 기반으로 한 단일 페이지 웹 응용 프로그램을 Chrome 확장 프로그램으로 마이그레이션하고 있습니다. 그러나 pushState이나 hashbang 기반 라우터 모드는 확장 기능 내에서 잘 작동하지 않습니다. 이제는 사용자 상호 작용에 대한 뷰를 직접 렌더링하는 대신에 window.location 시스템을 우회하는 것이 더 낫다는 결론을 얻었습니다. 그러나 수십 개의 파일에서 Router.navigate을 호출하지 않고이를 구현하는 방법을 잘 모르겠습니다.

백본 라우팅 시스템을 유지하면서 URL의 변경 사항을 무시할 수있는 플러그 가능/모듈 식 방법이 있습니까?

Answer 1

에 Backbone.History.navigate을 재정의 할 수 시스템에서 Chrome 확장 프로그램 (예 : 슬래시를 덮어 쓴 경로 포함)에서 사용할 때 hashbang 버그를 처리하지 않고도 backbone.js가 제공하는 경우 pushstate 전체 체이스를 건너 뛰고 Router.navigate에 직접 URL을로드 할 수 있습니다.

Router = Backbone.Router.extend({ 

    navigate: function (url) { 

    // Override pushstate and load url directly 
    Backbone.history.loadUrl(url); 

    }, 

    // Put routes here 
    routes: { } 

}); 

그런 다음 역사를 변경하지 않고 새로운 경로를로드, 심지어 data-backbone 속성을 포함한 모든 링크 (예 : <a href="login" data-backbone>Login</a>)에 액션을 결합하는 Router.navigate(url)를 호출 할 수 있습니다으로 :

이것은 달성하기 위해 실제로 매우 간단합니다 다음과 같은 이벤트 :

$(function(){ 

    // Initialize router 
    Router = new Router; 
    Backbone.history.start(); 

    // Bind a[data-backbone] to router 
    $(document).on('click', 'a[data-backbone]', function(e){ 
    e.preventDefault(); 

    Router.navigate($(this).attr('href')); 
    }); 

}); 

Answer 2

Router.navigate의 정의를 다시 정의 할 수 있지만 Background.router를 사용하지 않는 것이 좋습니다. 나는 그것이 약간의 혼란을 야기 할 수 있다고 생각하고, 현재 당신이보기에서 역사의 변화를 일으키고 있다면 당신의 코드는 그것없이 깨끗해질 것이다.

Backbone.Marionette에는 컨트롤러라는 개념이 있는데, URL지도가없는 라우터처럼 작동합니다 (Marionette의 경우 경로 정의를 최소화하고 대신 컨트롤러에 동작을 호출하는 것이 좋습니다). 당신도 원하지 않는 마리오 네트의 구성 요소를 사용할 필요가 없습니다. 당신이 정말로 그것을 그대로 라우터를 고수하고 싶었다면

, 당신은 아마 단지 (테스트되지 않은 주) 난 당신이 정말 라우팅 혜택을 Router.navigate를 사용하여 고수 할

navigate: function(fragment, options) { 
    if (!History.started) return false; 
    if (!options || options === true) options = {trigger: options}; 
    fragment = this.getFragment(fragment || ''); 
    if (this.fragment === fragment) return; 
    this.fragment = fragment;  
    if (options.trigger) this.loadUrl(fragment); 
}