백본 마리오네트 Require.js, 지역을 사용하는 방법이

Question

을 설정하는 나는 현재 궁극적으로 종종 공유 내용과 내가하는 방법이 확실하지 않습니다에 대한 6 개의 "스크린"또는 페이지에 금액 백본 마리오네트 응용 프로그램을 쓰고 있어요 최고의 구조와 접근 영역.

여기에 설명 된 앱/모듈 설정을 사용하고 있습니다 : StackOverflow question 11070408: How to define/use several routings using backbone and require.js. 이것은 새로운 기능과 콘텐츠가 시간이 지남에 따라 추가되고 확장 성이 있어야하는 응용 프로그램이 될 것입니다 (가능한 한 분명히 재사용 가능)

건물에있는 단일 페이지 응용 프로그램에 모든 4 개의 기본 섹션이 있습니다 화면 : 헤더, 기본 콘텐츠, 보조 콘텐츠, 바닥 글.

푸터는 모든 페이지에, 헤더는 페이지 (3)에서도 동일하게 일치하고, 약간 남은 3 장에서 (동일한 요소/콘텐츠의 약 80 %를 사용하여) 변형된다. "morecontent"영역은 다양한 페이지에서 재사용 할 수 있습니다. 내 app.js 파일에서

내가 그렇게처럼 내 영역을 정의하고 있습니다 :

define(['views/LandingScreen', 'views/Header', 'router'], function(LandingScreen, Header, Router) { 
    "use strict"; 
    var App = new Backbone.Marionette.Application(); 

    App.addRegions({ 
     header: '#mainHeader', 
     maincontent: '#mainContent', 
     morecontent: '#moreContent', 
     footer: '#mainFooter' 
    }); 

    App.addInitializer(function (options) { 

    }); 

    App.on("initialize:after", function() { 
     if (!Backbone.History.started) Backbone.history.start(); 
    }); 

    return App; 
}); 

을 이제 상기 게시물에 다시 응용 프로그램 설정을 참조하면, 지역을 처리하는 가장 좋은 방법이 될 것입니다 무슨. 각 하위 앱에서 각 지역을 독립적으로 다시 선언하겠습니까? 모듈을 가능한 한 독립적으로 유지하는 가장 좋은 방법 인 것 같습니다. 내가 그 길로 간다면 하위 애플리케이션 사이에서 그 지역을 열거 나 닫거나 숨기거나 표시하는 가장 좋은 방법은 무엇일까요?

또는, 나는 app.js에 선언 된 지역을 유지합니까? 그렇다면 서브 애플 리케이션에서 해당 지역의 이벤트를 가장 잘 조정하고 조정하는 방법은 무엇입니까? app.js 파일에 정의 된 영역을 갖는 것은 모듈과 핵심 응용 프로그램이 서로에 대해 아는 것을 최소한으로 유지하는 것과 직관적 인 것처럼 보입니다. 게다가, 내가 본 모든 예제에는 기본 앱 파일에 appRegions 메소드가 있습니다. 하위 애플리케이션에서 해당 지역을 액세스하고 변경하는 것이 가장 좋은 방법은 무엇입니까?

미리 감사드립니다.

Answer 1

실제로 하위 응용 프로그램을 시작하는 데 도움이되는 루트 응용 프로그램이 있으며 표시해야하는 영역을 통과합니다. 또한 하위 응용 프로그램에 대한 상대 라우팅을 가능하게하는 Backbone.SubRoute을 기반으로하는 사용자 지정 구성 요소를 사용합니다. https://gist.github.com/4185418

당신은 쉽게 대신 내가 하위 응용 프로그램의 start 방법으로 전송있어 region 값의 여러 영역을 정의하는 addRegions의 "설정"개체를 보내도록 적응할 수 :이 요점 밖으로

확인

마리오 넷에서 someRegion.show(view)으로 전화 할 때마다 현재 표시되는 모든보기가 먼저 닫힙니다. 두 개의 서로 다른 지역, 각각 자체 앱에 정의되어 있지만 둘 다 동일한 DOM 요소에 바인딩되는 경우 중요한 것은 가장 최근에 show이라는 지역이있는 것입니다. 하지만 이전보기를 닫는 것의 이점을 얻지 못하기 때문에 지저분합니다. 예를 들어 이벤트 바인더를 바인딩 해제합니다.

그 이유는 어떤 종류의 루트 응용 프로그램에서 영역을 "상속"하는 하위 응용 프로그램이있는 경우 해당 루트 응용 프로그램의 실제 영역 인스턴스를 하위 응용 프로그램으로 전달하고 참조를 저장하기 때문입니다 서브 애플 리케이션의 속성으로 그 지역에. 그런 식으로 나는 여전히 subApp.regionName.show(view)으로 전화를 걸 수 있습니다. 완벽하게 작동합니다. 이벤트가 영역에서 응용 프로그램으로 버블 링되는 경우 이벤트 체인이 문제가됩니다 (영역은 루트 앱에 속할 것이므로 하위 응용 프로그램보다). region/views/controllers/등의 내장 기능에 의존하기보다 이벤트를 관리하기 위해 거의 항상 Marionette.EventAggregator의 별도 인스턴스를 사용하여이 문제를 해결합니다.

그렇다면 지역 인스턴스를 하위 애플리케이션에 전달하고 참조를 저장하면 "닫기"를 호출 한 다음 regionInstance.el 속성을 사용하여 동일한 요소를 가리키는 자신의 region 인스턴스.

for(var reg in regions) if regions.hasOwnProperty(reg) { 
    var regionManager = Marionette.Region.buildRegion(regions[reg].el, 
      Marionette.Region); 
    thisApp[reg] = regionManager; 
} 

모두 우선 순위에 따라 다릅니다.

Answer 2

나는 개인적으로 내 마리오네트 응용 프로그램에서 모듈을 사용하는 것을 선호합니다. js가 애플리케이션에 추가하는 복잡성을 제거한다고 생각합니다. 현재 작업중인 앱에서 내 백본 응용 프로그램을 정의하는 app.js 파일 하나를 만들었지 만 내 경로를로드하고 내 컬렉션을 채우고 내 지역을 채우는 컨트롤러 모듈을 사용하고 있습니다.

app.js ->

var app = new Backbone.Marionette.Application(); 
app.addRegions({ 
    region1: "#region1", 
    region2: "#region2", 
    region3: "#region3", 
    region4: "#region4" 
}); 

app.mainapp.js ->

app.module('MainApp', function(MainApp, App, Backbone, Marionette, $, _) { 
    // AppObjects is an object that holds a collection for each region, 
    // this makes it accessible to other parts of the application 
    // by calling app.MainApp.AppObjects.CollectionName.... 
    MainApp.AppObjects = new App.AppObjects.Core(); 

    MainApp.Controller = new Backbone.Marionette.Controller.extend({ 
    start: function() { 
     // place some code here you want to run when the controller starts 
    } //, you can place other methods inside your controller 
    }); 

    // This code is ran by Marionette when the modules are loaded 
    MainApp.addInitializer(function() { 
    var controller = new MainApp.Controller(); 
    controller.start(); 
    }); 
}); 

그런 다음 컨트롤러에 액세스 할 것이다 다른 모듈 내부에 경로를 배치한다.

그런 다음 웹 페이지에서, 당신은 호출하여 모든 것을 시작합니다.

$(function() { 
    app.start(); 
}); 

마리오네트가 자동으로 실행하고 모든 모듈을로드합니다.

나는 이것이 당신이 어떤 방향으로 시작 할텐데. 죄송합니다 더 나은 예제를 제공하기 위해 전체 응용 프로그램 코드를 복사하고 지나칠 수 없습니다. 이 프로젝트가 완료되면 웹에 푸시 할 수있는 데모 앱을 다시 만들 예정입니다.