지역별 수익률을 사용하는 적절한 방법

Question

나는 meteor.js에 초보자입니다. 나는 지역과 함께 수익률을 사용하는 가장 좋은 방법이 무엇인지 궁금하다. layout.html에서 내 yield/yield를 region으로 모두 사용해야합니까, 아니면 서브 템플릿에서도 사용할 수 있습니까? 예를 들어 두 개의 템플릿 (연락처 및 약)이 있습니다. 대화 상대에는 사이드 바 메뉴가 있으며 선택에 따라 사이드 바 옆의 영역이 자동으로 변경되지만 템플릿에 대해서는 사이드 바 메뉴가 없습니다. 그렇다면 연락처 템플릿을 아래와 같이 정의해야합니까?

<template name="contacts"> 
{{>sidebarmenu}} 
{{yield region="dynamiccontent"}} 
</template> 

Answer 1

내 접근 방식은 RouteController들과 함께 레이아웃의 응용 프로그램 전체 계층 구조를 사용하는 것입니다.

메인 컨트롤러에서 영향을받은 템플릿을 전체 화면으로 렌더링하는 기본 기본 레이아웃을 렌더링하기 시작했습니다.

client/views/lib/main-layout/main-layout.html :

<template name="mainLayout"> 
    {{! full screen layout : nothing too fancy here}} 
    {{> yield}} 
</template> 

client/views/lib/main-layout/controller.js :

MainController = RouteController.extend ({ layoutTemplate "mainLayout" onRun : 함수() { 당신이 그 것이다 논리를 넣을 수 있습니다 // 여기에 귀하의 사이트의 모든 페이지에서 실행될 수 있습니다. // 주로 서재응 설정 (문서 제목 설정, 등등 ...) 및 // Google 범용 애널리틱스 API 호출 } }});

그런 다음 navbar와 footer를 제공하고 두 페이지 사이에 페이지를 렌더링하는 페이지 레이아웃을 계속합니다. 페이지의 내용을 .page 및. {{currentRouteName}} - 페이지로 장식하여 현재 어떤 경로를 사용 하느냐에 따라 사이트의 스타일을 다르게 할 수 있습니다. currentRouteName의 구현은 여기에 있습니다 : meteor js iron router: apply CSS change whenever route changes

client/views/lib/page-layout/page-layout.html :

<template name="pageLayout"> 
    {{! let's add a navbar...}} 
    {{> yield region="navbar"}} 
    <div class="{{currentRouteName}}-page page"> 
    {{> yield}} 
    </div> 
    {{! ... and a footer}} 
    {{> yield region="footer"}} 
</template> 

client/views/lib/page-layout/controller.js :

PageController=MainController.extend({ 
    layoutTemplate:"pageLayout", 
    // specify which templates to render in the regions of the layout 
    yieldTemplates:{ 
    "navbar":{ 
     to:"navbar" 
    }, 
    "footer":{ 
     to:"footer" 
    } 
    } 
}); 

당신은 훨씬 더 구체적인 주어진 레이아웃을 요구하는 페이지에 존재하여 계층 구조를 계속이 생각 예를 들어 사이드 바를 추가하는 것 (데스크톱에서 레이아웃의 1/4을 차지하고, 부트 스트랩을 사용하여 모바일에 스택 됨).

새 레이아웃을 정의 할 때 템플릿 코드를 복사/붙여 넣기하고 여기 저기에 물건을 추가하여 이전 레이아웃을 "확장"할 수 있습니다.

client/views/lib/sidebar-layout/sidebar-layout.html

:

<template name="sidebarLayout"> 
    {{> yield region="navbar"}} 
    {{! we do not simply yield over here, we add a sidebar layout}} 
    <div class="{{currentRouteName}}-page page"> 
    <div class="row"> 
     <div class="col-lg-3"> 
     {{> yield region="sidebar"}} 
     </div> 
     <div class="col-lg-9"> 
     {{> yield}} 
     </div> 
    </div> 
    </div> 
    {{> yield region="footer"}} 
</template> 

client/views/lib/sidebar-layout/controller.js :

SidebarController=PageController.extend({ 
    layoutTemplate:"sidebarLayout", 
    // don't forget to yield the navbar and footer too, by extending the yieldTemplates 
    // property from the parent controller 
    yieldTemplates:_.extend({ 
    "sidebar":{ 
     to:"sidebar" 
    } 
    },PageController.prototype.yieldTemplates) 
}); 

대신 실제 경로에 묶여 아이 컨트롤러를 도출, 바로이 컨트롤러를 사용해서는 안됩니다. 예를 들어, 여기에 사이드 바 컨트롤러를 확장하고 레이아웃에 전용 사이드 바를 렌더링하는 AdminController가 있습니다.물론

AdminController=SidebarController.extend({ 
    // we are deriving from SidebarController, so the layoutTemplate is already set 
    // to sidebarLayout 
    // main template to yield to 
    template:"admin", 
    yieldTemplates:_.extend({ 
    "adminSidebar":{ 
     to:"sidebar" 
    } 
    },SidebarController.prototype.yieldTemplates) 
}); 

실제로 이러한 컨트롤러를 사용하는 것이 당신이 그런 방법으로 당신의 경로를 정의한다 : 당신이 레이아웃 + RouteController 계층 구조를 설정하기 어려운 매우 강력하지 볼 수 있듯이

Router.map(function(){ 
    this.route("admin",{ 
    path:"/admin", 
    controller:"AdminController" 
    }); 
}); 

을 . "글로벌 레이아웃"템플릿에 묶이지 않으려는 경우 앱을 구성하는 적절한 방법이라고 생각합니다.