경로에 따라 레이아웃 변경

David Sulc의 저서를 기반으로 RequireJS 모듈과 함께 모듈을 사용하는 작업 마리오 네트 앱이 있습니다.경로에 따라 레이아웃 변경

서버가 일부 기본 영역 (menuRegion 및 mainRegion)을 포함하는 index.html을 제공 할 때 내 app.js가 Marionette 앱을 시작합니다. 앱은 메뉴에 대한 MenuApp 모듈을 자동으로로드하고 경로에 따라 주요 콘텐츠 (예 : KanbanApp)에 대한 특정 모듈을로드합니다. 따라서 앱을 시작하기 전에 경로를 정의하는 모든 모듈을 완전히로드해야합니다. 이 시점에서

즉

require(["apps/home/home_app", "apps/kanban/kanban_app"], function(){ 
    Backbone.history.start(); 
});

는 응용 프로그램은 항상 index.html을/app.js에 정의 된 영역을 사용하고 있습니다.

이제는 다른 레이아웃을 가진 앱에 방문 페이지 (로그인 양식 등)가 포함되어야한다고 생각합니다. 나는 다른 접근법을 시도했지만 항상 막 다른 골목에 다다 랐습니다. 따라가는 단계는 무엇입니까?

내 기본 아이디어는 경로에 따라 "AppLayout"또는 "LandingLayout"이로드된다는 것입니다. 그러나 경로가 서브 모듈에 정의되어 있고 메인 라우터가 없다는 사실로 인해이 작업이 복잡해집니다. 또한이 로직에 대한 코드가 어디에 있는지, app.js와 각 서브 모듈 .js 사이에 새로운 추가 레이어가 있는지 확실하지 않습니다. 나는 상황이 너무 복잡해지기 때문에 이것이 최선의 해결책이라고 확신하지 못합니다. 예 : 이제/route-from-the-real-app를 호출하면 하위 모듈 경로가이를 캡처하고 컨트롤러를 실행합니다. 지금까지 컨트롤러는 기본적으로 mainRegion을 채웠습니다. 그러나 이제 컨트롤러는이 추가 레이어를 호출하여 AppLayout을 표시하고 추가적으로 menuRegion에 표시 할 MenuApp 이벤트를 트리거해야합니다. 이것은 원래 KanbanApp 작업이 아니어야합니다.

내가 index.html을/app.js에 선언 된 지역을 이동 :
이
내가 실패이 일을 달성하기 위해 노력하고 있어요,하지만 내 현재 코드 작업을 어떤 아이디어가 크게 감상 할 수 방법입니다 새로운 레이아웃으로 만들고 고유 한 컨텐츠 영역을 남겨 둡니다. LandingApp는 문제가없는 "/"가있을 때 여기에 내용을 표시합니다.
더 이상 앱 시작과 함께 MenuApp를로드하지 않습니다.
새로운 추가 레이어 인 아이디어로 새로운 MainApp 모듈을 만들었습니다. 이 모듈은 LayoutView를 인스턴스화하고 이벤트가 트리거 될 때 컨텐츠 영역에 추가합니다.

MenuApp와 MainApp 모두를로드해야하는 방법과시기는 확실하지 않습니다. 그들은 경로가 정의되어 있지 않기 때문에 앱 시작과 함께 필요하지는 않지만 이벤트 핸들러를 등록해야합니다.

이 변경 사항은 여기에 적용되기 전에 당신은 응용 프로그램의 전체 코드 (매우 간단)를 볼 수 있습니다 https://github.com/mezod/multikanban

어떻게 당신이 어떤 고급 패턴 또는 외부 libs와 사용하지 않고이 문제를 접근하는 것?

출처

2015-01-28 mezod

질문을 올바르게 이해하는 경우 앱의 '페이지'변경과 관련된 전략을 요청하고 있습니까?

"페이지"에 대한 컨테이너를 나타내는 응용 프로그램 개체에서 하나의 레이아웃보기를 인스턴스화하는 것이 일반적이라고 생각합니다. 해당 레이아웃보기에는 page이라는 영역이있을 수 있습니다. 그러면 해당 지역을 통해보기를 쉽게 전환 할 수 있습니다.예를 들면 : 당신은 그냥 App.changePage(myNewPageView)을 갈 수 있습니다 (경로 방법이나 다른 곳에서 응용 프로그램의 여부)

var App = Marionette.Application.extend({ 

    changePage : function(view) { 
     this.rootView.page.show(view); 
    }, 

    onStart : function() { 

     this.rootView = Marionette.LayoutView.extend({ 
      el: 'body', 
      regions: { 
      'page' : '.page-container' // some div on the page <div class="page-container"></div> 
      } 
     }); 

    }); 
});

은 다음 페이지를 변경합니다. 그 다른 페이지 ( myNewPageView)는 사이드 바의 영역이나 헤더 또는 원하는 것을 포함 할 수있는 레이아웃보기 일 수도 있습니다.

출처

2015-02-18 15:21:29 Tom

답변

관련 문제