结合区域使用收益的适当方法 [英] Appropriate way of using yield with region

问题描述

我是meteor.js的新手.我很想知道在区域中使用收益的最佳实践是什么.我应该将我的所有yield/yield与layout.html中的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>

推荐答案

我的方法是使用应用程序级的布局层次结构，并结合RouteController s.

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(){ //在这里，您可以放置​​将在网站的每个页面上执行的逻辑 //我主要从事与SEO相关的工作(设置文档标题等)，以及 //调用Google Universal Analytics API } });

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

然后，我继续进行页面布局，该页面布局提供导航栏和页脚，并在两者之间呈现页面.它还使用其他类来修饰页面的内容:.page和.{{currentRouteName}}-page，以帮助您根据当前的路线来更改网站的样式.在此处可以找到currentRouteName的实现: meteor js铁路由器:每当路线更改时都应用CSS更改

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

您可以通过在需要给定布局的页面上更加具体来继续层次结构，请考虑此示例添加侧边栏(占据桌面布局的1/4，使用引导程序在移动设备上堆叠).

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

您绝对不应直接使用这些控制器，而应派生与实际路由绑定的子控制器. 例如，这是一个AdminController，它扩展了侧边栏控制器并在布局中呈现了专用的侧边栏.

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

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

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.

这篇关于结合区域使用收益的适当方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！