Meteor.js 응용 프로그램 템플릿의 복수 출력량

Question

iron-router에 대한 일반적인 {{> 출력}}이 템플리트 인 내 페이지를 렌더링하는 레이아웃 파일에 있습니다.

내 페이지 중 하나에서이 메뉴의 선택에 따라이 페이지와 관련된 다른 템플리트를로드하려고합니다.

어떻게하면됩니까?

Answer 1

철제 라우터의 layout template 옵션을 사용하여 비슷한 결과를 보았습니다. 변경하려는 홈 뷰 내부에 여러 개의 뷰/템플릿이있는 홈 뷰를 생성하려고한다고 가정 해보십시오. 그래서 수율 aside 및 footer에 지정된 서식이 지정된 자리에 렌더링 얻을

<template name="layout"> 
    <aside> 
    {{> yield region='aside'}} 
    </aside> 

    <div> 
    {{> yield}} 
    </div> 

    <footer> 
    {{> yield region='footer'}} 
    </footer> 
</template> 

:

Router.map(function() { 
    this.route('home', { 
    path: '/', 
    template: 'myHomeTemplate', 
    layoutTemplate: 'layout', 
    yieldTemplates: { 
    'myAsideTemplate': {to: 'aside'}, 
    'myFooter': {to: 'footer'} 
    } 
    }); 
}); 

레이아웃 템플릿의 HTML의 모습 장소 : 우선 나는 내 길을 선언합니다. 귀하의 경우에는 sidemenu 수확량을 지정할 수 있습니다.

다른 레이아웃을 정의 할 수있는 기본 레이아웃과 아이디어가 없습니다. 우리는 이것을 differentHome이라고 부릅니다.

Router.map(function() { 
    this.route('differentHome', { 
    path: '/differentHome', 
    template: 'myHomeTemplate', 
    layoutTemplate: 'layout', 
    yieldTemplates: { 
    'myDifferentAsideTemplate': {to: 'aside'}, 
    'myDifferentFooter': {to: 'footer'} 
    } 
    }); 
}); 

이 경로 선언에 대한 통지는 출력 템플릿을 변경하지만 기본 출력에서 ​​렌더링 될 기본 템플릿은 변경하지 않습니다. 이제 이벤트에 당신이 두 개의 서로 다른 수익률 템플릿을 변경됩니다-경로를 다시 할 수 있습니다

Router.go("differentHome"); 

을 아니면 경로에 HTML을 사용할 수있는 링크가 말한다.

EDIT (우연한 솔루션) :

를 사용하여 세션 변수는 사이드 메뉴 선택을 지시합니다.

HTML: 
<template name="main"> 
    ...... 
    <div class="sideMenu"> 
    {{#if sideMenu1}} 
     {{> side1Template}} 
    {{/if}} 

    {{#if sideMenu2}} 
     {{> side2Template}} 
    {{/if}} 
    </div> 
</template> 

JS: 
Template.main.helpers({ 
    sideMenu1 : function() { 
     return Session.equals("sideMenuChoice", "sideMenu1") 
    }, 
    sideMenu2 : function() { 
     return Session.equals("sideMenuChoice", "sideMenu2") 
    } 
}); 

이제 이벤트를 sideMenuChoice로 설정하십시오.