FlowRouter의 기본 렌더링 템플릿을 정의하는 좋은 방법

Question

Iron-Router를 Flow-Router로 대체 한 새로운 Meteor 프로젝트로 마이그레이션 할 때 Iron-Router의 기능을 사용하지 않아서 전체적으로 사용할 수 있었던 기본 동작과 설정을 정의하지 못했습니다. .

Flow-Router는 "group"구문을 사용하여 해당 그룹에 연결된 모든 경로에 적용 할 수있는 기본 후크 이벤트를 정의 할 수 있지만 기본 템플릿을 정의하는 데 사용할 수있는 것은 아무것도없는 것으로 알고 있습니다.

이 유형의 기본 글로벌 또는 그룹 템플릿 기능을 구현하는 가장 좋은 방법은 무엇입니까?

Answer 1

은 아래 업데이트 : 나는이 작업을 수행 할 수있는 매우 효과적이고 효율적인 방법입니다 제가 생각 밖으로 일한

.

흐름 라우터의 기능을 검토하면서, I 라우터 객체 관계없이 여부 그룹에 정의 된 키 - 값 쌍을 FlowRouter.current().route.group.options

이것은 개체의 모든 그룹의 매개 변수를 포함하는 필드를 포함하고 포함한다는 발견 그것들은 Flow-Router API에 의해 사용되는지 아닌지에 의해 사용됩니다.

그런 다음이 템플릿을 그룹의 일부 기본 설정을 라우터에 전달하는 간단한 방법으로 사용하기로 결정했습니다.

먼저 그룹 정의입니다 :

var mainRoutes = FlowRouter.group({ 
    name: "mainRoutes", 
    defaultTemplates: { 
    menu: "mainMenu", 
    breadcrumb: "mainCrumb", 
    sidebarLeft: "sidebarLeft", 
    sidebarRight: "sidebarRight", 
    footer: "mainFooter" 
    } 
}); 

그런 경로를 정의 우리가 흐름 - 라우터의 기존 기능을 사용하기 때문에 나는이 패턴을 좋아 this.group.options.defaultTemplates

mainAppRoutes.route('/', { 
    name: "home", 
    action: function() { 
    // Get the defaultTemplates object 
    var templates = this.group.options.defaultTemplates; 
    // Add route specific templates 
    templates.content = "homeScreen"; 
    // Pass all the templates to the renderer 
    BlazeLayout.render("appLayoutMain", templates); 
    } 
}); 

에서 이러한 액세스 할 수 있으며, 경로에 코드가 하나 더 추가되며 그룹 전체 기본 템플릿을 정의 할 수 있습니다. 이는 Iron-Router가 Router.config()에 템플릿 기본값을 사용하는 방법을 본질적으로 모방하고 로컬 경로 템플릿 정의의 추가 이점은 전체 기본 템플릿 개체를 덮어 쓰지 않습니다. 나는 그것을 지속적으로 작동하도록 해결했다 having another problem를 종료 했더라도

• UPDATE는 위, 나를 위해 잘 작동하고있다. 플로우 라우터는 비 반응성 때문에 우리는 로컬 route.action 기능에, 일을 당신이 어떤 기본 "경로 기본값을"수정하면

기본적으로, 라우터 그룹 개체는 오랫동안 같은 경로로 라우팅에서 유지 보인다 경로가 같은 그룹에 있기 때문입니다. 또한이 "옵션"개체는 경로 정의에서 라우터로 전달됩니다. 즉, 위의 경우 기본 매개 변수를 재정의하면 재정의하는 경로가 호출 된 후 동일한 그룹을 사용하는 모든 후속 경로에 대해 덮어 쓰게됩니다.

필자가 생각해 낸 해결책은 기본값 재설정 기능을 그룹 정의에서 triggersExit: [ resetDefaults ]과 같이 수행하는 것이 었습니다.

다음은 기본값 재설정입니다. 호출되는 다음 경로가 여전히 로컬 이러한 기본값 오버라이드 (override) 할 수 있도록 내가 출구에 그것을 한 이유는 다음과 같습니다

function resetDefaults (context) { 
    context.route.group.options.defaultLayoutTemplate = "mainAppLayout"; 
    context.route.group.options.defaultTemplates = { 
    defaultTeamplates: "navMain", 
    // ... 
}; 

Answer 2

Iron-Router의이 기능을 시뮬레이션 할 수있는 간단한 추상화를 사용하기로 결정했습니다. FlowRouter 자체 내에서 이러한 기능을보다 직접적으로 통합하고 유사한 솔루션을 찾고있는 다른 사람들과이 아이디어를 공유하기 전에이 패턴이 건전하고 확장 가능한 패턴인지 여부를 평가하려고합니다.

간단히 매개 변수 객체 템플릿으로 사용되는 객체를 만들었습니다.이 객체는 필요에 따라 수정 된 다음 BlazeLayout.render를 호출 할 때 전달됩니다.

이 같은 routes.js이 보일 수 있습니다 무엇 :

var appRouteGroup = FlowRouter.group({ 
    name: "appRouteGroup", 
    triggersEnter: [sometrigger] 
}); 

var appRouteTemplates = { 
    menuMain: "appNav", 
    footerMain: "appFooter" 
}; 

appRouteGroup.route("home", { 
    name: "home", 
    action: function() { 
    // We get the default templates 
    var templates = appRouteTemplates; 

    // Now we can add the route specific template 
    templates.content = "homePage"; 

    // Then render with templates passed through the object param 
    BlazeLayout.render("mainLayout", templates); 
    } 
}); 

이것은 다음 모든 경로에 대해 다시 정의 할 필요없이 기본 그룹 템플릿을 렌더링 할 수 있습니다. 그리고 템플릿 마크 업에 다음과 같이 : 나는 어쩌면 FlowRouter 내에서 더 직접적인 통합을 만들 수있는 방법을 찾고 있어요,하지만 완벽하게 기능 보인다

<template name="mainLayout"> 
    {{>Template.dynamic template=menuMain}} 

    {{>Template.dynamic template=content}} 

    {{>Template.dynamic template=footerMain}} 
</template> 

. 개선을위한 어떤 생각?

Answer 3

나는 Flow-router에 대한 route "default"매개 변수를 만드는보다 포괄적 인 방법을 추가 한 다른 솔루션을 제출하고 싶습니다.

이 패키지는 하나가 "부모"를 링크 할 수 있습니다 "노드"일련의 경로를 정의하고 정의에 설정 한 기본 매개 변수를 상속 할 수 있습니다 :

그것은 Flow-router-tree라는 분위기 패키지를 사용하여 그 부모의 이 패키지에 대한 다른 사람들의 의견을 보는 것이 흥미로울 것입니다.