使用區域產量的合適方法

Question

我是meteor.js的新手。我很好奇什麼是區域使用產量的最佳做法。我是否應該在layout.html中將所有的產量/收益與區域一起使用，或者我也可以在子模板中使用它們。例如，我有兩個模板（聯繫人和約）。聯繫人有側欄菜單，根據選擇，側欄旁邊的區域將以動態方式更改，但在模板中，我沒有側欄菜單。那麼我應該如何定義我的聯繫人模板？

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

Answer 1

我的方法是使用與RouteController耦合的應用程序範圍的佈局層次結構。

我從一個主控制器開始渲染一個默認的主佈局，只是將其受影響的模板全屏顯示。

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

你可通過甚至在需要給定的佈局頁更具體的繼續層次結構，考慮這例如添加一個側欄（佔用桌面上的四分之一佈局，使用引導程序堆疊在移動設備上）。

在定義新佈局時，您可能需要通過複製/粘貼其模板代碼並在其中添加內容來「擴展」前一個佈局。

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層次是非常強大的，並不難設置。我認爲這是組織應用程序的正確方式，當你不想被綁定到「全局佈局」模板時。