Meteor.js应用程序模板中的多产量 [英] Multiple yield in Meteor.js application template

问题描述

我在布局文件中有一个通用的{@> yield}}，用于渲染我的页面(即模板).

I have one general {{>yield}} for iron-router in a layout file which renders my pages, which are templates.

在我的一个页面中，我有一个侧边菜单，根据此菜单中的选择，我想在此页面中加载与此页面相关的不同模板.

In one of my pages, I have a side menu and according to the selection in this menu, I want to load different templates related to this page in this page.

我该如何实现?

推荐答案

我已经使用Iron-router的layout template选项做了类似的事情.假设我要创建一个主视图，该主视图中的多个视图/模板将发生变化.首先，我要声明路线:

I have done a similar thing using iron-router's layout template option. Say I want to create a home view with multiple views/templates inside of this home view that will change. First I would declare my route:

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

布局模板的html如下所示:

Where the html for the layout template would look like:

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

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

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

以便在产量aside和footer中指定的模板在指定的位置呈现.对于您的情况，您可以指定sidemenu产量.

So that the templates specified in the yields aside and footer get rendered in the specified spot. For your case you can specify a sidemenu yield.

不，您具有基本的布局和想法，可以定义其他路线.假设我们将其称为differentHome.

No that you have the basic layout and idea you can define another route. Say we call it differentHome.

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

关于此路线声明的通知，我正在更改产量模板，但没有更改将在主要产量中呈现的基本模板.现在，在事件上，您可以重新路由，这将更改两个不同的收益模板:

Notice on this route declaration I am changing the yield templates, but I am not changing the basic template that will be rendered in the main yield. Now on an event you can re-route which will change the two different yields templates:

Router.go("differentHome"); 

或者您可以使用html路由，例如带有链接.

Or you can use html to route, say with a link.

编辑(突发事件解决方案)

EDIT (Haphazard Solution):

使用会话变量来决定侧边菜单的选择.

Use Session Variable To Dictate Side Menu choice.

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")  
    }
 });

现在在事件上，将Session设置为sideMenuChoice.

Now on an event set the Session to what ever sideMenuChoice.

这篇关于Meteor.js应用程序模板中的多产量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！