Appropriate way of using yield with region

问题

I am newbie to meteor.js. I was curios what is the best practice of using yield with region. Should I use all my yield/yield with region in layout.html, or can I also use them in sub-templates. For example, I have two templates(contacts, and about). Contacts has side bar menu and according to the selection, the area next to sidebar will be changed dycamically, but in about template, I do not have sidebar menu. So should I define my contacts template like below?

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

回答1:

My approach is to use an application-wide hierarchy of layouts coupled with RouteControllers.

I'm starting with a main controller rendering a default main layout that simply renders its affected template full screen.

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:function(){ // here you can put logic that will be executed on EVERY pages of your site // I mainly do SEO related stuff (setting document title, etc...) as well as // calling google universal analytics API } });

Then I continue with a page-layout that provides a navbar and a footer and render the page between the two. It is also decorating the content of the page with additional classes : .page and .{{currentRouteName}}-page to help you style differently your site depending on which route you are currently. Implementation of currentRouteName is available here : 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"
    }
  }
});

You can continue the hierarchy by being even more specific on pages that require a given layout, consider this example adding a sidebar (taking 1/4 of the layout on desktop, stacked on mobile using bootstrap).

When defining new layout, you'll probably want to "extend" a previous one by copy/pasting its template code and adding stuff here and there.

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

You should never use these controllers directly, instead derive child controllers tied to actual routes. For example, here is an AdminController that is extending the sidebar controller and renders a dedicated sidebar in the layout.

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

Of course you should define your routes in such a way that they actually use these controllers :

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

As you can see the layout + RouteController hierarchy is very powerful and not that hard to setup. I think this is the proper way of organizing your app when you don't want to be tied to a "global layout" template.

来源：https://stackoverflow.com/questions/25602878/appropriate-way-of-using-yield-with-region

标签

meteor

iron-router