Meteor 合理利用区域产量

我是meteor.js的新手。我很好奇什么是使用区域产量的最佳实践。我应该在layout.html中使用所有的yield/yield with region，还是也可以在子模板中使用它们。例如，我有两个模板（contacts和about）。联系人有侧栏菜单，根据选择，侧栏旁边的区域将动态更改，但在关于模板中，我没有侧栏菜单。那么我应该像下面那样定义我的联系人模板吗

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

{{>侧边栏菜单}
{{yield region=“dynamiccontent”}

我的方法是使用应用程序范围内的布局层次结构，再加上

RouteController

s

我从一个主控制器开始，该控制器呈现一个默认的主布局，该布局只呈现受影响的模板全屏

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

：

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

<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>

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

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

您可以通过在给定布局的页面上更具体地继续层次结构，考虑此示例添加侧边栏（在桌面上使用1/4的布局，使用引导程序堆叠在移动设备上）。 在定义新布局时，您可能希望通过复制/粘贴其模板代码并在此处或那里添加内容来“扩展”以前的布局

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

：

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

<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>

<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>

决不应直接使用这些控制器，而应派生与实际管线关联的子控制器。 例如，这里有一个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)
});

当然，您应该以这样一种方式定义路由，即它们实际使用这些控制器：

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

---

正如您所见，布局+

RouteController

层次结构非常强大，设置起来并不困难。当你不想被束缚在“全局布局”模板上时，我认为这是组织应用程序的正确方法。

我喜欢这种方法，当我更改名称时，我发现PageController未定义错误。是否有可能SideBarController是在PageController之前加载的，因此它给出了未定义的错误？my router.js位于root/lib中。但是像PageController这样的控制器位于root/client/lib中。文件夹。据我所知，根库是在客户端文件夹之前加载的，因此我可能会因此而出错。您可能在这里遇到了加载顺序问题，我没有提到这一点，但继承意味着正确的加载顺序，这在目前可能很难做到。meteor没有特别处理“root”，也许您应该重新阅读加载订单流程中的文档：