Question

我是meteor.js的新手。我很好奇在区域使用产量的最佳做法是什么。我应该在layout.html中使用区域的所有yield / yield，还是可以在子模板中使用它们。例如，我有两个模板（联系人和约）。联系人有侧栏菜单，根据选择，侧栏旁边的区域将以dycamically方式更改，但在大约模板中，我没有侧栏菜单。那么我应该如下定义我的联系人模板吗？

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

Answer 1

我的方法是使用与RouteController s。

结合的应用程序范围的布局层次结构

我开始使用主控制器渲染默认的主要布局，只需将其受影响的模板全屏呈现。

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：函数（）{ //在这里，您可以放置将在您网站的每个页面上执行的逻辑 //我主要做SEO相关的东西（设置文档标题等）以及 //调用google通用分析API } }）;

然后我继续使用提供导航栏和页脚的页面布局，并在两者之间呈现页面。它还使用其他类来装饰页面内容：.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)
});

当然，您应该以实际使用这些控制器的方式定义路线：

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

正如您所看到的，布局+ RouteController层次结构非常强大，而且设置起来并不困难。我认为，当您不希望与“全局布局”模板绑定时，这是组织应用程序的正确方法。

与区域一起使用产量的适当方式

1 个答案: